Question

在同一页面上使用多个slick滑块会导致内容重复，即使原始内容没有重复也是如此。

对同一页面中的多个元素使用滑动效果会导致将所有元素的内容替换为第一个元素的内容。

HTML

 <div class="product-slick-general" id="product-slick-1>
    .... // content goes here and respects the slick html structure
 </div>

JS

$('.product-slick-general').each(function() {    
    $(this).slick({
        slidesToShow: 3,
        slidesToScroll: 2,
        autoplay: true,
        infinite: true,
        speed: 300,
        dots: true,
        arrows: false,
        responsive: [{
            breakpoint: 991,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
            }
        },
            {
                breakpoint: 480,
                settings: {
                    dots: false,
                    arrows: true,
                    slidesToShow: 1,
                    slidesToScroll: 1,
                }
            },
        ]
    });

  })

Answer 1

似乎是您的选择器不够具体的问题。您可以改用id。

let $productSliders = $(document).find('.product-slick-general');
for (let i = 0; i < $productSliders.length; i++) {
  let index = i + 1;
  $('#product-slick-' + index).slick(
  {
    slidesToShow: 3,
    slidesToScroll: 2,
    autoplay: true,
    infinite: true,
    speed: 300,
    dots: true,
    arrows: false,
    responsive: [{
        breakpoint: 991,
        settings: {
            slidesToShow: 1,
            slidesToScroll: 1,
        }
    },
        {
            breakpoint: 480,
            settings: {
                dots: false,
                arrows: true,
                slidesToShow: 1,
                slidesToScroll: 1,
            }
        },
    ]
})
}

同一页面上的多个平滑滑块会复制第一个元素

1 个答案: