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

Question

[xonar]

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

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

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

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

Код на примерах 2 табов, собачки всё ок, а вот кошки проблема - https://codepen.io/ruslan-lysenko/pen/LYpBEjL

Answer 1

[Владислав Бойченко]

При переключении таба реинициализируйте слайдер. Конкретно в вашем случае можно элементарно все слайдеры таким образом:

[...document.querySelectorAll('.services-list')].forEach(item => {
  item.slick('refresh');
});

Но есть загвоздка -- вам это нужно сделать в HTMl, где у вас подключен Slick, так как в области JS библиотека не подключена и соответственно такого метода нет.

Comments

[xonar]

Вычитал в документации слика про slickSetOption и Сделал такое.

<a href="#" class="page-services-item" onclick="slicks()">Кошки</a>

function slicks() {
    $('.services-list').slick("slickSetOption", "draggable", true, true);    
}

Всё работает, но есть как обычно одно НО. При переключение на таб не сразу срабатывает функция, а только когда 2 раза нажмёшь на таб. event.preventDefault(); тоже не привёл к желаемому результату.

[Владислав Бойченко]

Зачем устанавливать draggable: true?
Этим же путем сделайте то, о чем я написал выше:

function slicks() {
    $('.services-list').slick("refresh");    
}

[xonar]

Владислав Бойченко, Ура, заработало. Это вычитал в документации (мой английский меня значит подвёл), но был на правильном пути.

Но, не понимаю, что за refresh? Хотелось бы уже до конца понять мне.

Спасибо.

[xonar]

Владислав Бойченко, Благодарю, отрыл метод refresh в документации. Изучил, буду знать теперь.

[Владислав Бойченко]

xonar, просто реинициализирует слайдер, благодаря чему он выстраивается снова.
Изначально в табе, у которого display: none, слайдер не может выстроится правильно, соответственно при открытии таба его нужно "обновить". Вариантов много, этот достаточно быстрый. Вот еще пара:

function slicks() {
    $('.services-list').slick("slickGoTo", 0); // Прокручиваем слайдер до первого слайда
}

function slicks() {
    $('.services-list').resize(); // Иммитируем изменение слайдера, он опять таки перестроится
}

[xonar]

Владислав Бойченко, Спасибо. Все бы так отвечали доходчиво и очень понятно)

Answer 2

[Вазген Алексанян]

сначала сделайте инит только собаки потому что они открыты. потом при переключении на кошек сделайте инит соответствующий слайдер.