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

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 链接：链接

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

我认为这将是答案，但由于某种原因，我的轮播在加载第二组后似乎不再工作，就好像我没有再次重新初始化它一样？

score 6 · Accepted Answer

第 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>');

更新！

第 3 步 - 将焦点重新放在第一张幻灯片上（省略此步骤会导致时常出现空白幻灯片）

slider.flexslider(0);

score 1 · Accepted Answer

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

另见此处：链接

score 0 · Accepted Answer

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

你已经启动了一个 flexslider：

    $('#element').flexslider({
      动画：“幻灯片”，
      控制导航：假，
      方向导航：真
    });

当我想更改以前创建的滑块中的幻灯片并重新启动它时，请执行以下操作：

创建临时 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",
  controlNav: false,
  directionNav: true
});

将 div ID 从 element_temp 更改为 element
```
$('#element_temp').attr('id','element');
```

score 0 · Accepted Answer

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

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

编辑：

看起来这个线程在底部有一些很好的提示/代码可以尝试 - https://github.com/woothemes/FlexSlider/issues/78

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

4 回答 4

Related

Reference