jquery - Nivo slider ，使自定义链接更改单击时的幻灯片

Question

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

有一个 Lavalamp 菜单，带有 Nivo slider ，我们希望将其链接在一起。如您所见，菜单中有 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”更改为适当的链接，但这似乎不起作用。

感谢您的帮助!

问候，卡斯帕

Answer 1

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

1. 将 currentSlide 的索引设置为所需幻灯片之前的 1，然后，
2. 点击 nextNav 即可向前推进。

注意:如果您要动态更新 nivo slider 图像，这也是一个很好的解决方案。在这种情况下，请更新图像源，然后滑动到当前幻灯片。所有切片将由 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);