Javascript 如何重新加载slick（slider/carousel）jQuery插件？

我有两个按钮，功能相同，即从API获取数据，然后转换为html，然后使用jQuery将其附加到

。最后，使用jQuery插件将HTML元素显示为滑块

但是，单击第一个按钮后，如果单击第二个按钮（反之亦然），滑动条不再工作

Javascript代码：

$(document).ready(function(){

    /*
    Description  : Handle Day Button Event
    */
    $('.dayList').on("click", function(event)
    {
            var dayChild = $(this).attr('id');

            //::refresh day lline
            $('.hour-to-hour-line').empty();    
            getHourList(dayChild,function()
            {

                /* 
                The Slick
                */
                $('.hour-to-hour-line').slick({
                  dots: false,
                  infinite: false,
                  speed: 1000,
                  slidesToShow: 6,
                  slidesToScroll: 1,
                  focusOnSelect: true,
                  arrows: false,
                  slickSetOption: true
                }); 
          });   
    });
});

<div id="monday" class="dayList" data-daycount = "1" tabindex="1"> Monday </div>
<div id="tuesday" class="dayList" data-daycount = "2" tabindex="2"> Tuesday </div>
<br/>
<div id="hour2" class="hour-to-hour-line"></div>

HTML代码：

$(document).ready(function(){

    /*
    Description  : Handle Day Button Event
    */
    $('.dayList').on("click", function(event)
    {
            var dayChild = $(this).attr('id');

            //::refresh day lline
            $('.hour-to-hour-line').empty();    
            getHourList(dayChild,function()
            {

                /* 
                The Slick
                */
                $('.hour-to-hour-line').slick({
                  dots: false,
                  infinite: false,
                  speed: 1000,
                  slidesToShow: 6,
                  slidesToScroll: 1,
                  focusOnSelect: true,
                  arrows: false,
                  slickSetOption: true
                }); 
          });   
    });
});

<div id="monday" class="dayList" data-daycount = "1" tabindex="1"> Monday </div>
<div id="tuesday" class="dayList" data-daycount = "2" tabindex="2"> Tuesday </div>
<br/>
<div id="hour2" class="hour-to-hour-line"></div>

---

有人能解决这个问题吗

下面的代码适用于我

$('.my-slider')[0].slick.refresh()

---

这是工作代码

已测试光滑版本1.8.1

---

您应该尝试使用如下内容：

$（'.hour-to-hour-line'）.slickRemove（0）

和

$（'.hour-to-hour-line'）.slickAdd（getHourList（dayChild））

我们可以使用

getHourList

函数的内容吗？请阅读文档。。要破坏这个插件，你必须使用

$（'.your slider'）.slick（'unslick'）

not

$（'hour-to-hour-line'）。unslick（）

（搜索Destroy）在Hi@MoshFeu中，我尝试过，firebug的结果是“TypeError:a[f]。slick未定义”a。在开发时，我建议使用未统一的版本，以便您更好地理解问题。我想你应该检查一下为什么你不能毁掉它。我猜这与你的问题有关。在我的例子中，刷新不起作用，使用了

resize

方法，它对我有效

jQuery（“.popup slider”）。slick（'resize'）

Am get

Uncaught TypeError:无法读取未定义的属性“refresh”

哪一个是您的光滑版本？@TomSawyer也许您可以尝试像$（'.slick slider'）.eq（0）.slick（'refresh'）@米希巴特，它不起作用。正确的方法是

$（'.photos'）。而不是（'.slick initialized'）。slick（）

，它会在ajax加载后重新滑动所有未初始化的元素。