当我异步调用新的图库列表时,我试图在页面刷新时重新初始化FlexSlider.
我认为下面的例程可行,但事实并非如此.即使新图像成功加载,似乎第一个FlexSlider仍然存在.
有没有办法摧毁,然后重建画廊？
谢谢
function flexInit() {
$('.flexslider').flexslider({
animation: "slide",controlsContainer: ".paginator",manualControls: 'a',after: function(slider){
if(slider.atEnd == true) {
// ??? slider.destroy;
galBuild();
}
}
});
}
function galBuild() {
$.getJSON("/gallery/next/"+galID,function (data) {
var results = data.objects;
var list = $(".flexslider ul.slides");
var i = 0;
$.each(results,function () {
list.append('<li><p>' + results[i].title + '</p><img src="' + results[i].src + '"><p class="flex-caption">' + results[i++].caption + '</p></li>');
});
flexInit();
});
}
galBuild();
解决方法
我正在使用不同的方法,即
你已经开始使用一个flexslider：
$('#element).flexslider({
animation: "slide",controlNav: false,directionNav: true
});
当我想在之前创建的滑块中更改幻灯片并重新启动它时,id执行以下操作：
>创造临时div：
$('#element).before('
<div id="element_temp" class="flexslider"></div>
');
>使用先前创建的滑块删除div
$('#element).remove();
>将新幻灯片列表插入临时div：
var html = `
<ul class='slides">
<li><img src="link to image" /></li>
<li><img src="link to image" /></li>
<li><img src="link to image" /></li>
</ul>`;
$('#element_temp').html(html);
>在临时div上启动flexslider
$('#element_temp').flexslider({
animation: "slide",directionNav: true
});
>将div ID从element_temp更改为element
$('#element_temp').attr('id','element');
它适用于多个flexliders
