Как сделать слайдер с табами?

Question

[DeniSidorenko]

Добрый день, есть такой макет


Суть в том что есть табы( 5 штук) и каждый таб имеет свой слайдер
Но у нас есть управление слайдеров( право вверх ) и количество слайдов для активного таба

Как лучше всего сделать более правильно. Делать под каждый таб - свой слайдер не практично. Можно ли как то указать по дата атрибутом или .eq(index) что бы при клике на таб, другие слайдеры остановились, а нужный слайдер начал работу. А элементы управления поставить как классы ( ибо если несколько активных слайдов с тем же управлениям идут баги)

Предпочтения конечно у slick но может вы предложите более хорошие альтернативы)
Заранее спасибо) всем добра)

Answer 1

[Vadim Bogomazov]

Сделай один слайдер, слайды раздели по группам через дата-атрибуты, по выбору пункта таба крути до первого слайда нужной группы. И при перелистывании проверяй, если изменилась группа, меняй активный таб.

Comments

[DeniSidorenko]

Слайдер одной группы надо сделать цикличным,Вариант ставить все слайды в одном слайдере - не подойдет

Answer 2

[Владимир Голубь]

Задай каждому слайду в data, к какому табу он принадлежит. По умолчанию поставь всем display: none, а по переключению вкладок показывай/скрывай необходимые слайды.