@greencost

Реализация полукруглого слайдера?

Добрый день.
Мне нужно реализовать вот такой слайдер:

6463a8dc3a2f0187799502.jpeg

Каждый хомяк - отдельный слайд, двигаться они должны по как бы по полукругу (это, конечно, не совсем полукруг, но я не понимаю - как это правильно назвать).

Погуглил из того, что сейчас популярно - owl, swiper, splide, но похожих примеров не нашел. Т.к. с версткой и js я работаю мало, то подозреваю, что просто неправильно задаю запросы.

Может кто-то подсказать - в какую сторону смотреть, или хотя бы как это правильно называется?
  • Вопрос задан
  • 200 просмотров
Пригласить эксперта
Ответы на вопрос 1
delphinpro
@delphinpro Куратор тега JavaScript
frontend developer
как вариант применять трансформации к слайда. Отталкиваться от активного и видимых, они обычно имеют свой класс.

грубый пример

.slide-visible { transform: scale(0.5); } // первый видимый слайд
.slide-visible + .slide-visible { transform: scale(0.75); } // второй
.slide-visible ~ .slide-active { transform: scale(1); } // активный, в центре
.slide-active + .slide { transform: scale(0.75); } // следующий за активным
.slide-active + .slide + .slide { transform: scale(0.5); } // последний видимый
// немного плавности
.slide { transition: transform 1s ease; }
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы