寻找同步多个 nivo-slider 的功能

Question

我第一次在堆栈溢出上发帖，所以我希望有人能够帮助我解决这个问题：

我在一个页面上有 3 个 nivo-slider，水平排列。我希望它们能够同步，但更常见的是它们在几秒钟后就会失去同步。当所有滑块都使用此代码初始化时就是这种情况：

    $(window).load(function() {
     $('#slider').nivoSlider({
      animSpeed:500,         
      pauseTime:3000,         
     });
    });

但是，我想我可以像这样设置一个滑块，并使用参数设置另外两个滑块：

    manualAdvance:true,

然后

    beforeChange: function(){},

在第一个滑块上使用：来控制其他两个 - 将它们保持在同步。但是...我不确定在这里使用什么功能来转发其他滑块，我已经到处查看了，我真的很感谢您的帮助，提前致谢！

Answer 1

这似乎没有在插件的核心中实现

，但您可以在 Nivo Slider v2.6 中自行添加它，

未压缩版本位于 start 和 stop 函数声明下方的第 633 行，

// Start / Stop
this.stop = function(){
    if(!$(element).data('nivo:vars').stop){
        $(element).data('nivo:vars').stop = true;
        trace('Stop Slider');
    }
}

this.start = function(){
    if($(element).data('nivo:vars').stop){
        $(element).data('nivo:vars').stop = false;
        trace('Start Slider');
    }
}

添加以下函数

//Manually run the slider
this.run = function() {
        nivoRun(slider, kids, settings, 'next');
}

您可以在包含更改后 。你可以使用它，就像

$('#slider').nivoSlider().data('nivoslider').run();

把它放在正确的事件中一样，你应该完成

Answer 2

我想，设置暂停时间和 animSpeed 应该能让你的 nivo 滑块同步。

你说“更常见的是它们在几秒钟后失去同步”，是否有可能你有pauseOnHover：true并且你无意中将鼠标悬停在它们上并且它们变得不同步。可能是一个愚蠢的问题，但这发生在我身上。