Javascript 如何重新加载 slick (slider/carousel) jQuery 插件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32371003/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to Reload slick (slider/carousel) jQuery plugin?
提问by coderInrRain
i have 2 buttonswith same function, that's to Get data from API then convert to html then append it using jQuery to <div>. Last, show it using slickjQuery plugin to show HTML element as slider.
我有2 个具有相同功能的按钮，即从 API 获取数据，然后转换为 html，然后使用 jQuery 将其附加到<div>. 最后，使用流畅的jQuery 插件显示它，将HTML 元素显示为滑块。
However, after click 1st button, if i click 2nd button (or vice versa), the slick(slider) does NOT work anymore.
不过，点击后第一按钮，如果我点击第二个按钮（或者相反），在slick（滑块）不工作了。
The JavascriptCode :
该的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
});
});
});
});
The HTMLCode :
该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>
The JavascriptCode, getHourList()function :
在使用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();
}
}
});
}
Anybody have solution for this ?
有人对此有解决方案吗？
回答by Mihir Bhatt
Here's the working code
这是工作代码
tested for slick version 1.8.1
测试光滑版本 1.8.1
$('#slick-slider').slick('refresh');
回答by Pertr Pavliuk
The code below works for me
下面的代码对我有用
$('.my-slider')[0].slick.refresh()
