Как сделать такой слайдер?

Question

[Pavel_20]

Добрый день!
Встала задача реализации необычного для меня слайдера. Думаю задумка понятна исходя из скрина. Левый слайд увеличивается, а также появляется его описание.
Реально ли чисто физически реализовать такое с использованием уже написанных слайдеров (использую в данном проекте Swiper)?

Comments

[Виталий Першин]

А в чем сложность? у вас ширина практически одинаковая, а высоту вы можете изменить без проблем, просто вытяните внутренний блок слайда на 30%

Answer 1

[RAX7]

Answer 2

[sergski]

Слайд слева поучает класс active, те у вас уже есть всё для творчества. Всем фото, кроме active, сделайте отрицательный отступ вниз, при получении active убирается отступ. Для красоты добавить animation. Описание также: при active меняйте ему отображение с none на block и и тоже с анимацией. В общем просто добавь css.

Answer 3

[StiflerProger]

Поковырялся в Swiper. Сделал такой слайдер. Прошу к стилям не придираться, т.к. основа не в них.

Из минусов то, что надо будет в .swiper-container-preview слайдеры в порядке -1 добавлять.
Пробовал использовать autoScrollOffset, но он почему-то не хочет работать с первым слайдом, но потом работает отлично. Поэтому такой вот костыль))

https://jsfiddle.net/v2yrnkhe/3/