flexslider - 在元素单击时重置 flexslider

Question

我目前正在构建一个使用多个 flexslider 的站点。这个概念是，当用户单击特定按钮时，它会显示一个带有与按下的按钮相关的特色内容的 flexslider，这都是非常简单的东西。

我现在遇到的问题是，flexslider 在单击按钮时触发，但是每当用户单击不同的按钮时， slider 都不会重置。

我想尝试在每次单击按钮时将 slider 重置为滑动 0。我曾尝试在插件中使用 .stop() 和一些回调功能，但到目前为止我还没有运气。想知道其他人是否曾经遇到过这种情况？ (并荣获..)

footer.php 中的代码目前是非常标准的问题:

    $('.button').click(function() {
    $('.flexslider').flexslider({ 
        controlNav: true,
        directionNav: false,
        slideToStart: 0,  
        pauseOnHover: true,  
    });
});

Answer 1

我知道这个问题发布已经很久了，但它可能会对某人有所帮助。

我实际上面临同样的问题。经过一番摸索后，我设法使用以下代码使其工作:

// Catch the flexslider context
var slider = $(".flexslider").data("flexslider");

// Unset the animating flag so we can move back to the first slide quickly      
slider.animating = false;

// Move to the first slide and stop the slideshow there
slider.flexAnimate(0, true, true);

如果您想在第一张幻灯片返回，但不希望动画停止，只需将最后一行替换为 slider.flexAnimate(0);
我相信 slider.stop()方法不会取消设置 animating旗帜。在我看来应该是，因为这个标志在 flexAnimate() 中使用。检查是否实际滑动的功能。如果标志设置为 false ，然后是 flexAnimate()函数会突然返回。