Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to Reload slick (slider/carousel) jQuery plugin?

i have 2 buttons with same function, that's to Get data from API then convert to html then append it using jQuery to <div>. Last, show it using slick jQuery plugin to show HTML element as slider.

However, after click 1st button, if i click 2nd button (or vice versa), the slick (slider) does NOT work anymore.

The Javascript Code :

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

The HTML Code :

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

The Javascript Code, getHourList() function :

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

Anybody have solution for this ?

like image 867
zukijuki Avatar asked Sep 03 '15 08:09

zukijuki


People also ask

How do I re initialize slick slider?

After calling an request, set timeout to initialize slick slider. Do not initialize slick slider at start. Just initialize after an AJAX with timeout. That should work for you.

Does slick slider use jQuery?

Slick is a fresh new jQuery plugin for creating fully customizable, responsive and mobile friendly carousels/sliders that work with any html elements.


2 Answers

Here's the working code

tested for slick version 1.8.1

$('#slick-slider').slick('refresh');
like image 74
Mihir Bhatt Avatar answered Sep 24 '22 15:09

Mihir Bhatt


The code below works for me

$('.my-slider')[0].slick.refresh()
like image 23
Pertr Pavliuk Avatar answered Sep 24 '22 15:09

Pertr Pavliuk