Question

我目前正在建立一个利用多个flexsliders的网站。这个概念是当用户点击一个特定的按钮时，它会显示一个flexslider，其中包含与按下的按钮相关的特色内容，这些都非常简单。

我遇到的问题是，目前，flexsliders只需点击一个按钮即可触发，但每当用户点击其他按钮时，滑块都不会重置。

我想尝试让滑块重置为每次按下按钮时滑动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()函数将突然返回。

Answer 2

认为答案可能在于启动回调函数。尝试这样的事情（未经测试）

$('.button').click(function() {
   $('.flexslider').flexslider({ 
        controlNav: true,
        directionNav: false,
        slideToStart: 0,  
        pauseOnHover: true,
        start: function(slider) {
            if (slider.currentSlide != 0) {
                slider.flexAnimate(0)//move the slider to the first slide (Unless the slider is also already on the first slide);
            }
        }
   });
});

Answer 3

在flexslider中使用第1056行的新api ＆＃39; startAt：0，
//整数：滑块应该开始的幻灯片。数组符号（0 =第一张幻灯片）＆＃39;

在元素单击时重置flexslider

3 个答案: