当我异步调用新的图库列表时,我试图在页面刷新时重新初始化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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。