当我异步调用新的图库列表时,我试图在页面刷新时重新初始化FlexSlider.
@H_301_2@我认为下面的例程可行,但事实并非如此.即使新图像成功加载,似乎第一个FlexSlider仍然存在.
@H_301_2@有没有办法摧毁,然后重建画廊？
@H_301_2@谢谢
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();
解决方法
我正在使用不同的方法,即
@H_301_2@你已经开始使用一个flexslider：
$('#element).flexslider({
animation: "slide",controlNav: false,directionNav: true
});
@H_301_2@当我想在之前创建的滑块中更改幻灯片并重新启动它时,id执行以下操作：
@H_301_2@>创造临时div：
$('#element).before('
<div id="element_temp" class="flexslider"></div>
');
@H_301_2@>使用先前创建的滑块删除div
$('#element).remove();
@H_301_2@>将新幻灯片列表插入临时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);
@H_301_2@>在临时div上启动flexslider
$('#element_temp').flexslider({
animation: "slide",directionNav: true
});
@H_301_2@>将div ID从element_temp更改为element
$('#element_temp').attr('id','element');
@H_301_2@它适用于多个flexliders
