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

Answer 1

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