微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jquery – FlexSlider是否有destroy方法

当我异步调用新的图库列表时,我试图在页面刷新时重新初始化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 举报,一经查实,本站将立刻删除。

相关推荐