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

Question

[Павел Антонов]

По макету нарисован вот такой слайдер, смущает видимость аватарки с предыдущего и следующего слайда, ни разу не доводилось делать подобное) что-то впал в ступор)

Вот набросал черновик слайдера, осталось сделать так чтобы миниатюр было 3 и чтобы в центре всегда была миниатюра активного слайда

Answer 1

[Павел Антонов]

Сделал 2мя паралельными слайдерами, связал их js между собой, вопрос закрыт.
Результат тут

Answer 2

[Сергей Горячев]

Где взять простой(легкий) вертикальный jQuery слайдер/карусель?
Какой есть хороший вертикальный слайдер с миниатюрами?
Ну, а для миниатюр нужен такой подход.
Почему slick Center Mode не запускается?
В общем, задача довольно типичная)

Comments

[Павел Антонов]

впринципе так и хотел делать, но не пойму как миниатюрам дать center mode) он же относится непосредственно к слайдам а не к точкам

[Павел Антонов]

Обновил вопрос дал ссылку на черновик слайдера

[Павел Антонов]

По идее этот center mode просто cssом описан же? т.е теоретически мне нужно написать стили для превьюшек чтобы они центровались там сами

[Сергей Горячев]

Павел Антонов: У точек есть класс .active, а дальше дело техники.

Answer 3

[Кирилл]

Но это же обычный слайдер, просто стилизованный чуть нестандартно. Подойдёт любой слайдер, из популярных это kenwheeler.github.io/slick/
Только вместо точек фотки. Вертикальное переключение у него тоже есть.

Comments

[Павел Антонов]

Вот набросал черновик слайдера, осталось сделать так чтобы миниатюр было 3 и чтобы в центре всегда была миниатюра активного слайда

Answer 4

[rinatoptimus]

Попробуйте модифицировать этот.

Comments

[Сергей Горячев]

Улыбнуло)

[Павел Антонов]

Sergey Goryachev: а у меня нормально открылось Chrome Linux 57.0.2987.98 (64-bit)

[Сергей Горячев]

Павел Антонов: FF, Mint 18

[Сергей Горячев]

Павел Антонов: Вообще, скажу честно, то, что работает идеально в хроме, не работает в FF часто. Поэтому для меня в работе полностью устраивает FF, косяки видно в 99% случаев)))