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