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

Question

[Дмитрий Локшин]

Друзья, всем привет!
Кто подскажет как сделать такой слайдер (желательно на slick, т.к. он уже используется в проекте).

Справа - слайдер, а слева превью. Превью может быть много, но показаны только первые 6 штук, остальные тоже являются слайдером, которые скролятся вертикально.
Со slick slider работал достаточно много, но уже сколько ломаю голову, все никак не могу сделать. Знаю, что есть такие настройки как asNavFor, чтобы сделать слайдеры зависимыми. Также есть настройка vertical, чтобы сделать превью вертикально скролящимися, а также rows, чтобы сделать в два ряда, но тогда в фокус попадает сразу 2 превью и справа картинка не соответствует превью, находящимся в фокусе.
В общем, что уже только не перепробовал, все никак(( Если бы превью были в один ряд, то другое дело, но клиент хочет именно в два.
Помогите, пожалуйста! Либо может есть какие-то уже готовые подобные плагины, готов пойти уже даже на такие жертвы.
Заранее огромное спасибо!

Comments

[Andrew]

Проблема в стилизации dot'ов?
Не помню, есть ли в слике hashURl, судя по всему нет, owl в помощь.

[Максим Тимофеев]

Кто эту хрень нарисовал? Зачем так?

[Дмитрий Локшин]

Максим Тимофеев, У меня порой желание заставить дизайнеров самих поверстать, чтобы знали, что такая мелочь может вылиться в такие проблемы.

[alex_mirg]

Дмитрий Локшин, Ты написал что решил эту задачу на slick,
Если не сложно подскажи как сделал, у меня аналогичная ситуация
Как реализовать слайдер с двумя рядами и превью?

Спасибо заранее

Answer 1

[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>

Стили сам нарисуешь!

Comments

[Дмитрий Локшин]

Спасибо, конечно, я прекрасно это все видел, но не работает! Когда начинаешь менять стилями расположение в два ряда, то слайдер начинает лагать - номер превью не соответствует номеру слайдера.

[Дмитрий Локшин]

Если сделаете подобный, то я готов уже заплатить. Это со стороны все кажется просто, т.к. до этого я делал нереальные слайдеры со сложнейшей анимацией, например danger-electro.ru (первый слайдер и слайдер с преподавателями), вот тут тоже достаточно сложные слайдеры есть unomomento.probeloff.net а когда этот увидел, подумал, что проще простого, но нет!

Answer 2

[thehighhomie]

ахаха)) ты делаешь сайт КИПАРХу? просто поставь любой плагин для слайдера, к примеру owl-carousel и переопредели стили в верстке, вот и все. Ну или руками сделай, че там 15 минут)

Comments

[Дмитрий Локшин]

Кто такой КИПАРХ? Если бы все было так просто, давно бы сделал, там загвоздка в том, что это оба слайдера.

[thehighhomie]

Дмитрий Локшин, да это ерунда все, если api slick'a позволяет получить доступ к созданному слайдеру то просто для дополнительных функций создай кнопки и вешай на них обработчики, а в обработчиках управляй слайдерами через api. если не разберешься то часов в 9 вечера я смогу попробовать помочь

[Дмитрий Локшин]

thehighhomie, Да, будет отлично! Готов заплатить.

[thehighhomie]

Дмитрий Локшин, скинь код куда-нибудь, codepen или лучше jsfiddle

[Дмитрий Локшин]

thehighhomie, https://jsfiddle.net/n6abz3ve/11/ Там правда со стилями небольшие проблемы, но основная идея осталась, просто расположение не по дизайну.

[thehighhomie]

Дмитрий Локшин, сейчас посмотрю

[thehighhomie]

Дмитрий Локшин, жесть конечно) допилите стили пожалуйста а то очень напрягает непонятка с картинками)

Answer 3

[Дмитрий Грабко]

https://codepen.io/dolce/pen/QarQde

Comments

[Дмитрий Локшин]

Спасибо, конечно, я прекрасно это все видел в примере, но не работает! Когда начинаешь менять стилями расположение в два ряда, то слайдер начинает лагать - номер превью не соответствует номеру слайдера.

[Максим Тимофеев]

Дмитрий Локшин, Просто разметку не добавляйте лишнюю

Answer 4

[V_Holmow]

У css-мастера вроде, есть старый видос как делать подобный слайдер, там он делает на примере карточки товара. Поищи на ютубе. А вообще это очень легко.

Comments

[Дмитрий Локшин]

Да, спасибо! Сделал сам, через slick. А вообще я такие слайдеры ни разу не встречал, прям в такой реализации - с одной колонкой много, а таких нет, чтобы именно это были оба слайдера. Вот если бы превью были не слайдерами, то это дело 5-ти минут.

[alex_mirg]

Дмитрий Локшин, Поделись пожалуйста решением, как ты настроил slick слайдер под эту задачу?
А то все говорят просто, кидают примеры, но все это начинает не работать когда добавляешь свойство row для slick slider