正在寻找同步多个nivo滑块的功能

Question

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

我在一页上有3个nivo滑块，水平排列。我希望它们同步，但通常情况下，它们会在几秒钟后失去同步。当所有滑块都用以下代码初始化时，就会出现这种情况：

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

然而，我认为我可以像这样设置一个滑块，并使用以下参数设置另外两个滑块：

    manualAdvance:true,

然后使用：

    beforeChange: function(){},

在第一个滑块上控制其他两个-保持它们同步。然而我不确定在这里使用什么功能来转发其他滑块，我到处都看了，我真的很感谢你的帮助，提前谢谢！

Answer 1

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

但你可以自己加

在Nivo Slider v2.6中，在启动和停止的函数声明下方的第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');
}

在包含更改后的.js之后，也许可以自己压缩它(http://javascriptcompressor.com/)你可以像一样使用它

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

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

Answer 2

设置暂停时间和animSpeed应该会让你的nivo滑块同步。

你说"通常情况下，它们会在几秒钟后失去同步"，你是否有可能在悬停时出现pauseOnHover：是的，你不小心在它们上方悬停，它们就会失去同步。这可能是一个愚蠢的问题，但我也遇到过这种情况。