当我异步调用新的图库列表时,我试图在页面刷新时重新初始化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