web-dev-qa-db-ja.com

スリック（スライダー/カルーセル）jQueryプラグインをリロードする方法は？

私は同じ機能を持つ2つのボタンを持っています。つまり、APIからデータを取得し、htmlに変換してから、jQueryを使用して_<div>_に追加します。最後に、 slick jQueryプラグインを使用して、HTML要素をスライダーとして表示します。

ただし、最初のボタンをクリックした後、2番目のボタンをクリックすると（またはその逆）、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();
                }
            }
    });
}
_

誰かがこれに対する解決策を持っていますか？

javascriptjqueryhtmlslider
7
coderInrRain

ここに作業コードがあります

slickバージョン1.8.1でテスト済み

$('#slick-slider').slick('refresh');
7
Mihir Bhatt

以下のコードは私のために働きます

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