Question

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

Answer 1

我正在使用不同的方法，即

你已经开始使用一个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);

在temp div上启动flexslider

$('#element_temp').flexslider({
  animation: "slide",
  controlNav: false,
  directionNav: true
});

将div ID从element_temp更改为element

$('#element_temp').attr('id','element');

它适用于多个flexliders

Answer 2

Rob我对此进行了调查并找到了解决方案

您需要像这样修改您的功能

function flexInit() {
    $('.flexslider').flexslider({
        animation: "slide",
        controlsContainer: ".paginator",
        manualControls: 'a',
        after: function(slider){
            if(slider.atEnd == true)    {
                slider.addSlide(galBuild());
            }
        }
    });
}


function galBuild() {
   $.getJSON("/gallery/next/"+galID, function (data) {
    var results = data.objects;
    var i = 0;
    $.each(results, function () {
       return ('<li><p>' + results[i].title + '</p><img src="' + results[i].src + '"><p class="flex-caption">' + results[i++].caption + '</p></li>');
    });

   });
}

flexInit();

此外，您还需要在 slider.update 函数中对flexSlider.js文件进行一些修饰。现在它没有检查位置变量未定义，所以你也必须检查它。

Answer 3

最简单的方法是从元素数据集中删除flexscroll

function flexInit() {
    $('.flexslider').flexslider({
        animation: "slide",
        controlsContainer: ".paginator",
        manualControls: 'a',
        after: function(slider){
            if(slider.atEnd == true)    {
                slider.addSlide(galBuild());
            }
        }
    });
}
//this remove flexslider form element dataset
$('.flexslider').removeData("flexslider");

现在您可以随时致电

flexInit();

将重新创建您的flexslider。

是否有FlexSlider的destroy方法

3 个答案: