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

Друзья, всем привет!
Кто подскажет как сделать такой слайдер (желательно на slick, т.к. он уже используется в проекте).
5aa7de49018b3848013987.png
Справа - слайдер, а слева превью. Превью может быть много, но показаны только первые 6 штук, остальные тоже являются слайдером, которые скролятся вертикально.
Со slick slider работал достаточно много, но уже сколько ломаю голову, все никак не могу сделать. Знаю, что есть такие настройки как asNavFor, чтобы сделать слайдеры зависимыми. Также есть настройка vertical, чтобы сделать превью вертикально скролящимися, а также rows, чтобы сделать в два ряда, но тогда в фокус попадает сразу 2 превью и справа картинка не соответствует превью, находящимся в фокусе.
В общем, что уже только не перепробовал, все никак(( Если бы превью были в один ряд, то другое дело, но клиент хочет именно в два.
Помогите, пожалуйста! Либо может есть какие-то уже готовые подобные плагины, готов пойти уже даже на такие жертвы.
Заранее огромное спасибо!
  • Вопрос задан
  • 709 просмотров
Пригласить эксперта
Ответы на вопрос 5
alex-1917
@alex-1917
Твою дивизию!!! В примерах у разработчика даже пример есть!!!!
jQuery(document).ready(function($){
	$('.slider-for').slick({
		slidesToShow: 1,
		slidesToScroll: 1,
		arrows: false,
		fade: true,
		asNavFor: '.slider-nav'
	});
	$('.slider-nav').slick({
		slidesToShow: 2,
		slidesToScroll: 1,
		asNavFor: '.slider-for',
		dots: true,
		centerMode: true,
		focusOnSelect: true
	});
});

<div class="slider-for">
	<img src="kortingo_01_big.jpg" alt="">
	<img src="kortingo_02_big.jpg" alt="">
	<img src="kortingo_03_big.jpg" alt="">
	<img src="kortingo_04_big.jpg" alt="">
</div>
<div class="slider-nav">
	<img src="kortingo_01_small.jpg" alt="">
	<img src="kortingo_02_small.jpg" alt="">
	<img src="kortingo_03_small.jpg" alt="">
	<img src="kortingo_04_small.jpg" alt="">
</div>

Стили сам нарисуешь!
Ответ написан
thehighhomie
@thehighhomie
ахаха)) ты делаешь сайт КИПАРХу? просто поставь любой плагин для слайдера, к примеру owl-carousel и переопредели стили в верстке, вот и все. Ну или руками сделай, че там 15 минут)
Ответ написан
@V_Holmow
У css-мастера вроде, есть старый видос как делать подобный слайдер, там он делает на примере карточки товара. Поищи на ютубе. А вообще это очень легко.
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы