如何从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
我认为这是答案,但由于某种原因,我的旋转木马在加载到第二组后似乎不再有效,好像我没有重新初始化它一样?
答案 0 :(得分:6)
第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);
答案 1 :(得分:1)
好的,所以在挖掘之后发现flexslider现在有一个destroy方法,但它要求我在github页面上使用demo来使它工作。我创建了一个工作的plunker,它添加和删除了一个flexslider轮播LINK
另见:LINK
答案 2 :(得分:0)
你应该在OP中包含一个指向flexslider的链接,它不是我使用过的/可以访问我的头脑。话虽如此,通常好的插件往往带有破坏方法。我要尝试的第一件事是看看是否在flexslider上定义了destroy方法,如下所示:
$('#slider').flexslider("destroy");
编辑:
看起来这个帖子有一些很好的提示/代码可以试用 - https://github.com/woothemes/FlexSlider/issues/78
答案 3 :(得分:0)
最好遵循这一点。基本上它启动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');