One of the most common jQuery sliders being used by designers and developers these days is the Nivo Slider. I have personally used it on a variety of website for different clients. The main reasons I use it are the simplicity of the installation, how quickly you can change effects, and of course because it works on iPhones and iPads.
As versatile as the slider is, I noticed one important feature it’s missing; the lack of a way to shut off the auto loop. By this I mean that you may want it to go through a set of images once, and stop at the last image. It’s strange there isn’t a simple setting built in, but I have two solutions here for this issue.
For both methods I’m providing a zip file with the entire demo for your download.
Method 1.
In this first method the Nivo Slider starts and ends on the same image (slide 1).
The following javascipt code goes in your head tag, the slider has an ID of “slider“.
$(window).load(function() {
$('#slider').nivoSlider({
startSlide:0, //Set starting Slide (0 index)
slideshowEnd: function(){$('#slider').data('nivo:vars').stop = true;}
});
});
Method 2.
In this second method the Nivo Slider only plays each image once.
Because of the way the slider works it always must end on slide 1. So what I did is force it to start on slide 2. So when it stops on slide 1 it has only played each image once. Put whatever image you want to be first in the slider as Slide 2. A little quirky, but hey..it works!
The following javascript code goes in your head tag, the slider has an ID of “slider“.
$(window).load(function() {
$('#slider').nivoSlider({
startSlide:1, //Set starting Slide (0 index)
slideshowEnd: function(){$('#slider').data('nivo:vars').stop = true;}
});
});
