генерация нового slick слайдера для новой карточки товара

Question

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

Сама карточка довольно объемная. Просто ее пример

<div class = "card" data-pid="1">
    <div class = "wrapper" id="slickSlider">
        <img class = "img">
        <img class = "img">
        <img class = "img">
    </div>
    <div class = "wrapper2" id="slickSlider2">
        <img class = "img">
        <img class = "img">
        <img class = "img">
    </div>
</div>

и сам slick

$(function(){
    $('#SlickSlider').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        arrows: false,
        dots: false,
        focusOnSelect: true,
        vertical: true,
        infinite: false,
        asNavFor:"#SlickSlider2"
    });

    $('#SlickSlider2').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        infinite: false,
        asNavFor:"#SlickSlider"
    });
});

Answer 1

я так подозреваю, что у вас есть какой-то цикл по карточкм, и там меняется data-pid. Вот его можно использовать для формирования id блоков. Получите что-то вроде

<div class = "card" data-pid="1">
    <div class = "wrapper slick" id="slick_1">
        <img class = "img">
        <img class = "img">
        <img class = "img">
    </div>
    <div class = "wrapper2 slick-nav" id="slick_nav_1">
        <img class = "img">
        <img class = "img">
        <img class = "img">
    </div>
</div>

далее перебираете все .card и вешаете обработчики

 $(".card").each(function(){
      let pid = $(this).data('pid');

      $(`#slick_${pid}`).slick(...);
      $(`#slick_nav_${pid}`).slick({
         asNavFor: `#slick_${pid}`,
      });
 });

Хотя в целом, основные слайды можно добавить без цикла через $(".slick").slick(...) а вот навигации уже в цикле.

БЛОГ НА HUSL

генерация нового slick слайдера для новой карточки товара

Ответы (1 шт):