Image sliders, once rarely found on websites, have become a new trend of web design. Indeed, they are present on free XHTML/CSS themes all the way up to commercial templates on sites like themeforest. Unfortunately, with this trend, many convoluted scripts aimed at providing easy sliders are now available on the web. They often times have complex, barely-documented installation and usage that makes it hard to integrate into modern websites.
Recently, I ran into this exact problem when finishing one of my XHTML/CSS templates. I couldn’t find a simple, effective slider that was easy to use, simple to style, and a breeze to get working. Luckily, after enough searching, I came across Nivo Slider, and my problems were solved.
Nivo Slider is a 7 KB (compressed) jQuery plugin that provides a simple and intuitive way of creating sliders. With various transition effects, settings, general features, and great browser support, it beats out the competition. Unlike many other scripts, Nivo Slider’s instructions come on a single page and, more importantly, are easy to follow. No searching required.
Other than including the CSS/JS files, all it took to get a Nivo Slider working on my theme was this HTML:
<div id="slider">
<img src="slider/slide1.jpg" alt="Slide 1" title="Post 1" />
<img src="slider/slide2.jpg" alt="Slide 2" title="Post 2" />
<img src="slider/slide3.jpg" alt="Slide 3" title="Post 3" />
<img src="slider/slide4.jpg" alt="Slide 4" title="Post 4" />
<img src="slider/slide5.jpg" alt="Slide 5" title="Post 5" />
</div>
and this JavaScript:
$( '#slider' ).nivoSlider();
How much more can you ask for? Even if the plain, default theme isn’t enough, styling is a breeze! Not only that, but if the slider styling on the front page is exactly what you’re looking for, there is even a style pack that you can download.
The only slight concern you may have with the script is the lack of support for IE6. Since I’m not interested in supporting this ancient browser anymore, this wasn’t too big an issue for me. Nevertheless, the use of IE6 is steadily decreasing and, with all of its features and advantages, Nivo Slider is certainly a good choice for an effective, customizable image slider.