如何重新加载光滑（滑块/轮播）jQuery插件？

Posted 2023-05-09

【中文标题】如何重新加载光滑（滑块/轮播）jQuery插件？

【英文标题】：How to Reload slick (slider/carousel) jQuery plugin?

【发布时间】：2015-11-29 00:22:03

【问题描述】：

我有 2 个按钮 具有相同的功能，即从 API 获取数据然后转换为 html，然后使用 jQuery 将其附加到 <div>。最后，使用slick jQuery 插件将 HTML 元素显示为滑块。

但是，在单击第一个按钮后，如果我单击第二个按钮（反之亦然），slick（滑块）不再起作用。

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

HTML代码：

<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>

Javascript 代码，getHourList() 函数：

function getHourList(day,callback)

    //::convert day to dayCount
    var dayCount = 0;
    switch(day) 
        case "monday":
            dayCount = 1;
            break;
        case "tuesday":
            dayCount = 2;
            break;      
    

    //::fetch data from API
    jQuery.ajax(
        type: 'GET',
        url: 'http://localhost/api/1.0/schedule/items?day='+dayCount,
        dataType: 'json',
        beforeSend: function (xhr) 
            xhr.setRequestHeader ("Authorization", "Basic WS8fkn5344WN8==");
        ,
            success: function (data) 
            
                //::refresh <div class='hour-to-hour-list'> template
                $('.hour-to-hour-line').empty();                

                //data definition
                var iCounter_1          = 1;
                var iCounter_2          = 1;
                var iCounter_2_next   = 1;
                var timer = [];

                //::exctract time from array=>data
                jQuery.each( data.item, function( key, val ) 
                                                   
                    timer[iCounter_1] = val.time;       
                    iCounter_1++;           
                );

                //::exract time from array=>timer
                jQuery.each( data.item, function( key, val ) 
                                   
                    var time         = val.time;        
                    var parent_id = "hour_"+iCounter_2;
                    var hour_id    = "this_hour_"+iCounter_2;
                    var next         = iCounter_2 + 1;

                    $html = 
                    "<div id="+parent_id+" class='fl hour-focus'>"+
                        "<div id="+hour_id+" class='fl kurohige-prev jaman' data-time="+time+">"+time+"-"+timer[next]+"</div>"+
                        "<div class='fl line-0'></div>"+                    
                    "</div>";

                    $('.hour-to-hour-line').append($($html));       
                    iCounter_2++;       

                );
                if (callback)
                
                    callback();
                
            
    );

有人对此有解决方案吗？

【问题讨论】：

你应该尝试使用这样的东西：$('.hour-to-hour-line').slickRemove(0) 和 $('.hour-to-hour-line').slickAdd(getHourList(dayChild));

能不能得到getHourList函数的内容？

阅读文档。要销毁此插件，您必须在 kenwheeler.github.io/slick

中使用 $('.your-slider').slick('unslick'); 而不是 $('hour-to-hour-line').unslick()（搜索 Destroy）

嗨@MoshFeu 我试过了，萤火虫的结果是“TypeError: a[f].slick is undefined”

A.当您开发时，我建议使用未缩小的版本，以便您更好地理解问题。 B. 我认为你应该检查为什么你不能摧毁它。我的猜测是这与你的问题有关。

【参考方案1】：

这是工作代码

已针对 1.8.1 版本进行了测试

$('#slick-slider').slick('refresh');

【讨论】：

在我的情况下，刷新不起作用并使用了resize 方法，它对我有用jQuery(".popup-slider").slick('resize');

收到Uncaught TypeError: Cannot read property 'refresh' of undefined

你的 slick 版本是哪个？

@TomSawyer 也许你可以试试 $('.slick-slider').eq(0).slick('refresh');

@MihirBhatt 它不起作用。正确的方法是 $('.photos').not('.slick-initialized').slick() ，它在 ajax 加载后重新处理所有未初始化的元素。

【参考方案2】：

下面的代码对我有用

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