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

标签 jquery gallery carousel 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 链接:

编辑:

PLUNKR 链接:LINK

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

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

最佳答案

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

关于jquery - 清除并添加幻灯片/重新初始化 flexslider?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17151481/

相关文章:

html - 如何为引导登录页面创建一个简单的纯 CSS 图库/幻灯片?

javascript - Bootstrap 4 轮播 : make the slides at the left and right of the active slide visible

javascript - jQuery getJSON 抛出错误?

javascript - 如何使用jquery改变图像的颜色

jquery - JQuery 选项卡中的 ui 元素访问

html - 光滑的旋转木马向左箭头隐藏

jquery - 如何将搜索框放在轮播的顶部?

javascript - jQuery :parent selector doesn't work as expected with jQuery UI dialog

javascript - 无限的JavaScript图库功能

android - 如何在不扩展 Gallery 类的情况下停止在 Android 中使用 Gallery