slick 插件不适用于动态创建的内容，但适用于静态内容

Question

<div id="id1" class="scroll-footer">
<dynamically created div1></div>
<dynamically created div2></div>
<dynamically created div3></div>
<dynamically created div4></div>
</div>

$(document).ready(function(){
        $('.scroll-footer').slick({
            slidesToShow: 2,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 2000,
            arrows: true
        })
    });

我们已将 slick class 动态添加到 id1 div 但它不起作用？如何在加载动态创建的 div1、div 2etc 后添加 slick class？

Answer 1

添加动态元素时需要重新初始化函数

建议你这样做

function sliderInit(){
    $('.scroll-footer').slick({
        slidesToShow: 2,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        arrows: true
    });
};
sliderInit();

在此处调用函数以默认加载函数，并在添加动态元素的地方调用相同的函数sliderInit()。

注意 : 记得在添加元素后写这个函数。

Answer 2

我也有同样的疑问，

下面是我的解决方法。

你需要先.slick("unslick")它

$('.portfolio-thumb-slider').slick("unslick");
$('.portfolio-item-slider').slick({
   slidesToShow: 1,
   adaptiveHeight: false,
   // put whatever you need
});

希望有所帮助。

Answer 3

有一种方法可以解决这些问题。正如 documentation 所述：

slickAdd html or DOM object, index, addBefore Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String || Object

我会这样做：

$('#id1').slick(); 
$.ajax({
  url: someurl,
  data: somedata,
  success: function(content){
    var cont=$.parseHTML(content); //depending on your server result
    $(cont).find('.dynamically.created.div').each(function(){
      $('#id1').slick('slickAdd', $(this));
    })
  }
})

slick 插件不适用于动态创建的内容，但适用于静态内容

slick plugin is not working for dynamically created content but works well for static content

jquery

jquery-plugins

slick.js