Nivo 滑块，使自定义链接在单击时更改幻灯片答案

【问题标题】：Nivo slider, make custom links change the slides on clickNivo 滑块，使自定义链接在单击时更改幻灯片
【发布时间】：2011-09-13 20:40:35
【问题描述】：

我们目前正在开发以下网站： http://www.temminktrainingcoaching.nl/beta

有一个 lavalamp 菜单，带有一个 Nivo 滑块，我们希望将其链接在一起。如您所见，菜单中有 5 张幻灯片和 5 个链接。我们希望他们通信。这是 nivoslider 中更改幻灯片的代码：

$('.nivo-controlNav a', slider).live('click', function(){
            if(vars.running) return false;
            if($(this).hasClass('active')) return false;
            clearInterval(timer);
            timer = '';
            slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
            vars.currentSlide = $(this).attr('rel') - 1;
            nivoRun(slider, kids, settings, 'control');
        });

我对 jquery 很陌生，我不知道如何创建自定义链接。我尝试将 '.nivo.controlNav a' 更改为适当的链接，但这似乎没有奏效。

感谢您的帮助！

问候，卡斯帕

【问题讨论】：

你说的对应是什么意思？想要在选择幻灯片时加载某个页面，或者在单击菜单项时加载幻灯片？
最后一个选项。当您单击（或最终悬停）链接时，滑块应更改为相应的图像（5 个链接，5 个幻灯片）。
如果您能看看这个，我将不胜感激！谢谢！
你知道我在哪里可以获得 Nivo 滑块文档吗？您可能可以在滑块上调用一个函数来告诉它跳转到特定幻灯片，但我似乎找不到任何公共函数的文档。
nivo.dev7studios.com 是他们的网站，但我猜你已经找到了。我现在正在使用手机，我一回到家（30 分钟）就会好好看看它，然后在这里发帖。他们确实似乎没有任何简单的文档。他们鼓励您获得“专业支持”的专业许可证，无论这意味着什么;）

标签： jquery slider nivo-slider

【解决方案1】：

您可以调用 Nivo 滑块插件中的方法来实现“slideTo”或“转到幻灯片”，而无需修改插件代码。

将 currentSlide 的索引设置为所需幻灯片的前一，然后，
在 nextNav 中单击即可前进。

注意：如果您动态更新 nivo 滑块图像，这也是一个很好的解决方案。在这种情况下，更新图像源，然后滑动到 currentSlide。 nivo 将更新所有切片并显示新图像。

将其包装为 jQuery 函数并调用它：

 (function($) { 
         // slideTo function for nivo-slider
        $.slideTo = function(idx) {
            $('#slider').data('nivo:vars').currentSlide = idx - 1;
            $("#slider a.nivo-nextNav").trigger('click'); 
        }
  })(jQuery);
  // call the function
  // example:
  $.slideTo(3);

【讨论】：

效果很好，除非幻灯片处于过渡中间。关于修复它的任何想法，以便它可以检测到幻灯片正在转换？

【解决方案2】：

我能够通过使用 github 上提供的代码的一个分支来解决这个问题： https://github.com/gilbitron/Nivo-Slider/pull/176

它有一个新的函数 slideTo() 似乎可以很好地解决这个问题。

调用此代码跳转到第二张幻灯片

$('#slider').data('nivoslider').slideTo(1);

【讨论】：

对我不起作用。 Uncaught Typeerror object object object has no method slideto

【解决方案3】：

Nivo 自己的导航控件通过以下代码进行操作：

<div class="nivo-controlNav">
  <a class="nivo-control" rel="0">1</a>
  <a class="nivo-control" rel="1">2</a>
  <a class="nivo-control" rel="2">3</a>
  <a class="nivo-control" rel="3">4</a>
</div>

如果不是控制函数的第一行，我们可以复制它来创建我们自己的自定义导航：

$('.nivo-controlNav a', slider).live('click', function(){

jQuery 标识符的第二个参数 (slider) 意味着控件只能从滑块元素内确认，通常是 #slider div 内的任何内容。如果您使用未缩小的jquery.nivo-slider.js 并删除slider 参数，那么您可以在自己的导航中使用上述代码。修改后的函数应该是这样的：

        $('.nivo-controlNav a').live('click', function(){
            if(vars.running) return false;
            if($(this).hasClass('active')) return false;
            clearInterval(timer);
            timer = '';
            slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');
            vars.currentSlide = $(this).attr('rel') - 1;
            nivoRun(slider, kids, settings, 'control');
        });

也就是说，'.nivo-contolNav' 元素中的任何'a' 元素都将控制滑块。使用“rel”属性指定您想要的滑块页面。

另外，controlNav 设置必须设置为 true，但这是默认设置。

【讨论】：

【解决方案4】：

您可以触发点击 Nivo 生成的相关控制链接，例如，将滑块更改为第 4 个链接：

$('.nivo-control[rel="3"]').trigger("click");

【讨论】：