Question

如何从flexslider中删除所有幻灯片并添加新幻灯片？

或者如何销毁和重新定位flexslider？

基本上我想重置flexslider。

//Create hotel image array
$('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 0,
    minItems: 4,
    asNavFor: '#slider'
});

$('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel",
    start: function (slider) {
        $('body').removeClass('loading');
    }
});

指向flexslider的链接：

编辑：

PLUNKR LINK：LINK

我下载了这个应该有destroy方法的版本： https://github.com/woothemes/FlexSlider/pull/716

我认为这是答案，但由于某种原因，我的旋转木马在加载到第二组后似乎不再有效，好像我没有重新初始化它一样？

Answer 1

第1步 - 删除现有幻灯片：

var slider = $('.flexslider');
while (slider.data('flexslider').count > 0) 
                    slider.data('flexslider').removeSlide(0);

第2步 - 添加新幻灯片：

slider.data('flexslider').addSlide('<li>Hello world!</li>');
slider.data('flexslider').addSlide('<li>This is awsome</li>');

UPDATE！

第3步 - 将焦点设置在第一张幻灯片上（省略此步骤导致不时获得空白幻灯片）

slider.flexslider(0);

Answer 2

好的，所以在挖掘之后发现flexslider现在有一个destroy方法，但它要求我在github页面上使用demo来使它工作。我创建了一个工作的plunker，它添加和删除了一个flexslider轮播LINK

另见：LINK

Answer 3

你应该在OP中包含一个指向flexslider的链接，它不是我使用过的/可以访问我的头脑。话虽如此，通常好的插件往往带有破坏方法。我要尝试的第一件事是看看是否在flexslider上定义了destroy方法，如下所示：

$('#slider').flexslider("destroy");

编辑：

看起来这个帖子有一些很好的提示/代码可以试用 - https://github.com/woothemes/FlexSlider/issues/78

Answer 4

最好遵循这一点。基本上它启动1个滑块。然后，如果你想重新启动然后删除第一个滑块html /数据，然后开始添加新的并启动它。

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

清除和添加幻灯片/重新初始化flexslider？

4 个答案: