@Named

Как задать нестандартное положение слайдов в Swiper js?

Мне необходимо добавить на сайт слайдер картинок, движущихся как бы по сектору окружности. При этом между двумя центральными слайдами должен располагаться логотип компании, фиксированный, не относящийся к слайдеру. То есть между двумя центральными картинками должен быть пропуск.

Всё, что получилось на данный момент: Песочница

Слайды смещаются почти правильно, но сделать пропуск между ними не получается.

Как должно быть:

62fa25ebd3287901053645.png

В идеале ещё и смещение слайдов должно быть не на фиксированные пиксели, а по той самой окружности.

Возможно, есть какое-то готовое решение на этот счет, или подскажете, куда копать? Сменить плагин на какой-то другой тоже можно при необходимости.
  • Вопрос задан
  • 190 просмотров
Решения вопроса 1
@Named Автор вопроса
В общем, для swiper пришлось создать новый эффект, дубликат creative.
Ну а в нем используем переменную progress, которая показывает, где на данный момент находится слайд. 0 - это центр, 1 - первый элемент, -1 - минус первый. Вклиниваемся туда, где она вычисляется, и если progress < 0, вычитаем еще 0.5, если больше 0, то прибавляем 0.5. Таким образом образуется пустое место как раз по центру.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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