Nivo slider, make custom links change the slides on click

Question

We´re currently working on the following site: http://www.temminktrainingcoaching.nl/beta

There's a lavalamp menu, with a Nivo Slider, which we'd like to link together. As you can see, there are 5 slides, and 5 links in the menu. We'd like them to correspond. This is the piece of code in nivoslider which changes the slides:

$('.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');
        });

I'm pretty new to jquery, I couldn't figure out how to create custom links. I've tried to change '.nivo.controlNav a' to the appropiate links, but that doesn't seem to do the trick.

Thanks for any help!

Regards, Kasper

Solution 1

I was able to solve this by using a fork of the code available on github: https://github.com/gilbitron/Nivo-Slider/pull/176

It has a new function slideTo() that seems to work well for this.

Call this code to jump to slide 2

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

Solution 2

You can call methods inside the Nivo slider plugin to effect a 'slideTo' or 'go to slide' without having to modify the plug in code.

1. Set the index of currentSlide to one before the desired slide, then,
2. Trigger a click in the nextNav to advance forward.

Note: This also works as a good solution if you're dynamically updating the nivo slider images. In that case, update the image source and then slideTo the currentSlide. All the slices will be updated by nivo and the new image will be displayed.

Wrap it up as a jQuery function and call it:

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

Solution 3

Nivo's own navigation controls operate from the following code:

<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>

We would be able to duplicate this to create our own custom navigation if it wasn't for the first line of the controlling function:

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

The second parameter of the jQuery identifier (slider) means that the controls are only acknowledged from within the slider element, typically anything within the #slider div. If you use the un-minified jquery.nivo-slider.js and remove the slider parameter then you can use the above code in your own navigation. The modified function should look like this:

        $('.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');
        });

That is, any 'a' element within a '.nivo-contolNav' element will control the slider. use the "rel" attributes to specify the slider page you desire.

Also, the controlNav setting must be set to true, but this is the default setting.

Solution 4

You can trigger a click on the relevant control link that Nivo generates, for instance, to change the slider to the 4th link:

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

View more solutions

Comments

[Nate Bunney]

Works great, except when the slides are in the middle of a transition. Any thoughts on fixing it so it can detect that the slides are transitioning?

[ShawnWhite]

Does not work for me. Uncaught Typeerror object object object has no method slideto