我正在使用JQuery lightSlider。它运行得很好(嗯,实际上,我不得不稍微调整一下代码,但到目前为止已经足够了)。
我想要实现的是用ajax返回数据动态替换lightSlider内容,而我可以做到这一点。
对于每个新数据集,我再次调用lightSlider插件。这是我的ajax函数的“成功”或“完成”部分:
var lightsliderstring = "";
for(i=1;i<thumbsArray.length;i++){
lightsliderstring += "<li>\n";
if( $("#as_feature").val() ){
lightsliderstring += " <h3>" + $("#as_feature").val() + " photo " + i + "</h3>\n";
}
lightsliderstring += " <img src=\"/" + thumbsArray[i] + "\" />\n";
lightsliderstring += "</li>\n";
}
$("#lightSlider").html(lightsliderstring);
$('#lightSlider').lightSlider({
auto: true,
gallery: false,
item: 1,
loop: true,
slideMargin: 0,
thumbItem: 0
});
我每次调用新的ajax时都再次调用lightSlider,因为只调用一次lightSlider似乎不起作用。也许是因为在加载DOM之后动态创建了内容?无论如何,我想做的是在每次ajax调用之后清除lightSlider函数,因为我认为它们在同一div中彼此叠加。
进行一次lightSlider调用后,看起来不错:
但是在我的第二个ajax调用中,再次实例化lightSlider时,它开始“堆叠”。请注意,垂直方向未对齐的双箭头,以及图片下方索引点的垂直双倍:
解决该问题的方法是清除lightSlider的第一个实例。
最佳答案
假设您使用的Lightslider版本高于1.1.3,则应该能够.destroy()现有实例,如下所示:
var slider = $('#lightslider').lightSlider();
slider.destroy();
为了安全起见,在调用destroy方法之前,您需要检查滑块是否正确!