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

【问题标题】：slick plugin is not working for dynamically created content but works well for static contentslick 插件不适用于动态创建的内容，但适用于静态内容
【发布时间】：2016-08-09 06:39:06
【问题描述】：

<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
        })
    });

我们已经为 id1 div 动态添加了 slick 类，但它不起作用？加载动态创建的 div1、div 2etc 后如何添加 slick 类？

【问题讨论】：

您需要使用以下函数调用动态添加幻灯片 $('.scroll-footer').slick('slickAdd',"
");

标签： jquery jquery-plugins slick.js

【解决方案1】：

添加动态元素时需要再次初始化函数

建议你这样做

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

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

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

【讨论】：

我得到未捕获的类型错误：_.$slides 在执行上述方法时为空。

【解决方案2】：

这类事情有一种方法。正如documentation 所说：

slickAdd html 或 DOM 对象、索引、addBefore 添加幻灯片。如果提供了索引，将在该索引处添加，或者如果设置了 addBefore 则在之前添加。如果没有提供索引，则添加到末尾，如果设置了 addBefore，则添加到开头。接受 HTML 字符串 ||对象

我会这样做：

$('#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));
    })
  }
})

【讨论】：

【解决方案3】：

我也有同样的问题，

这就是我的解决方法。

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

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

希望有所帮助。

【讨论】：

感谢您提及 unslick