寻找同步多个 nivo 滑块的功能答案

【问题标题】：Looking for a function to synchronise multiple nivo-sliders寻找同步多个 nivo 滑块的功能
【发布时间】：2011-05-31 10:47:47
【问题描述】：

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

我在一页上有 3 个 nivo 滑块，水平排列。我希望它们同步，但更常见的是它们不会在几秒钟后不同步。使用以下代码初始化所有滑块时就是这种情况：

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

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

    manualAdvance:true,

然后使用：

    beforeChange: function(){},

在第一个滑块上控制其他两个滑块 - 使它们保持同步。但是...我不确定要在此处使用什么功能来转发其他滑块，并且我到处查看，非常感谢您对此提供的帮助，在此先感谢！

【问题讨论】：

标签： jquery slider nivo-slider

【解决方案1】：

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

但你可以自己添加

在 Nivo Slider v2.6 中，未压缩版本位于第 633 行，就在 start 和 stop 函数声明的下方

// 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();

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

【讨论】：

【解决方案2】：

设置暂停时间和 animSpeed 应该可以让您的 nivo 滑块同步，我会想到。

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

【讨论】：