@xonar
А смысл?

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

Доброго вечера.

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

Пробовал даже каждому слайдеру задавать свой класс и инциализировать его по уникальному классу - https://github.com/kenwheeler/slick/blob/master/in...

Тоже не помогло.

Код на примерах 2 табов, собачки всё ок, а вот кошки проблема - https://codepen.io/ruslan-lysenko/pen/LYpBEjL
  • Вопрос задан
  • 105 просмотров
Решения вопроса 1
vladislav_boychenko
@vladislav_boychenko
Купаюсь в гривнах
При переключении таба реинициализируйте слайдер. Конкретно в вашем случае можно элементарно все слайдеры таким образом:
[...document.querySelectorAll('.services-list')].forEach(item => {
  item.slick('refresh');
});

Но есть загвоздка -- вам это нужно сделать в HTMl, где у вас подключен Slick, так как в области JS библиотека не подключена и соответственно такого метода нет.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@VazgXa
HTML верстальщик / Frontend разработчик
сначала сделайте инит только собаки потому что они открыты. потом при переключении на кошек сделайте инит соответствующий слайдер.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы