Как реализовать слайдер с двумя рядами и превью?

Question

[alex_mirg]

Добрый день,
Подскажите пожалуйста способ реализации такого слайдера?
Желательно на slick так как в проекте уже использую slick

Превью реализовать не проблема, сложности начинаются при добавлении второго ряда.
Я попытался сделать на slick, но слайдер перелистывается по два слайда за клик.



Вот код
1 ряд работает: https://codepen.io/alex-rogochiy/pen/vvmwxv
2 ряда не работает: https://codepen.io/alex-rogochiy/pen/REVmKv

Заранее благодарю.

Answer 1

[Сергей delphinpro]

вот это слайдер (slick 2x2)
А картинка справа - отдельная превьюшка.
превью меняем по клику на слайд и по событию смены слайдов.
стрелки выносим отдельным кодом и подключаем к слику.

ну и заморочки с двумя слайдерами лишнее. Просто меняем картинку и всё. ну максимум можно заморочится с fade-анимацией на картинке (плавно скрыть, удалить, создать новую, плавно показать.)

Comments

[alex_mirg]

Сергей delphinpro , немного приоткрыл мне глаза)
Сейчас пробую реализовать таким образом.
После добавления второго ряда 1 слайдом начинает считаться 1 столбик?
Не подскажешь, это нормальное поведение?
take.ms/ilxip

Отпишусь как сделаю

[Сергей delphinpro]

alex_mirg, да. так задумано.

[alex_mirg]

Сергей delphinpro,
Сергей, спасибо за быстрый ответ)
В итоге сделал как ты и говорил:
Использую 1 слайдер.
А для превью написал небольшой скрипт.

Отмечаю решением)