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

如何从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的链接：

• http://www.woothemes.com/flexslider/
• https://github.com/woothemes/flexslider

编辑：

PLUNKR LINK： 链接

我下载了这个应该有破坏方法的版本： 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('
Hello world!
'); slider.data('flexslider').addSlide('
This is awsome
'); 

---

UPDATE！

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

 slider.flexslider(0); 

Answer 2

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

另见： LINK

Answer 3

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

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

编辑：

看起来这个post有一些很好的提示/代码向底部试用 – https://github.com/woothemes/FlexSlider/issues/78

Answer 4

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

你已经开始使用一个flexslider：

     $（ '＃元素'）。flexslider（{
      动画：“幻灯片”，
       controlNav：false，
       directionNav：是的
     }）;

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

• 创造临时div：

   $('#element').before(' 
   '); 

• 用之前创建的滑块删除div

   $('#element').remove(); 

• 将新幻灯片列表插入临时div：

   var html = ` 
   

• 在临时div上启动flexslider

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

• 将div ID从element_temp更改为element

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