Whereas lots of sliders available on the web including the Nivo use to rotate pictures in a loop, in some
cases, the objective sought is to keep a linear, not looped, play mode.
obviously inconsistent within such a context. Also, when the slider starts, the previous button is
enabled, allowing the user to get the last slide directly accessible.
However, some simple solutions are there and we will see in this tutorial how to automatically hide the
unwanted arrow at the beginning and at the end of the slideshow.
The HTML
To this end, we use the very useful beforeChange option and the Nivo Slider javascript variables
currentSlide/totalSlides.
As the slider will be stopped on the last slide, we ensure ourself that going back to the penultimate slide
starts it again.
Aside from that, we need to disable the keyboard navigation feature, and, due to the technique used,
the directionnavHide is also set to false (there are likely other ways to do it, don’t hesitate to comment
in this case. Thanks).
A last requirement is to hide the previous arrow when the slider is first shown.
Lines to add in the <head> section
BONUS: fade Out and fade In effect when the slider rotates (Demo)
I found very interesting the idea (thanks Dragos!) of inserting an intermediate and independent effect
between two slides, fading out into the background then fading in the next image.
So, here’s a solution to achieve this (without adding slides or modifying the javascript) with a
differentiated time for the two fading steps.
Note: You must give animSpeed and delayOut variables the same value (100ms in this demo code).
Enjoy!
The HTML
Code to add in the <head> section
