Currently Browsing: Home » Want an Effective, Customizable Image Slider? Consider Nivo Slider

Want an Effective, Customizable Image Slider? Consider Nivo Slider

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.

Nivo Slider

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.

This entry was posted on Sunday, June 13th, 2010 at 16:12:14. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “Want an Effective, Customizable Image Slider? Consider Nivo Slider”

  1. Lolindir Faelivrin says:

    Nice, i like it

  2. Richard says:

    I am having tremendous difficulty getting NivoSlider to work on my WordPress theme.
    I have tried for 3-4 weeks & spent hours trying different code combinations but it does not work for me (one large issue was a spelling error in the demo code/directory struture!). I have had some help from an ‘expert’ which helped get the images to display but then further advice from that source hasn’t worked and the expert has now gone quiet!
    I have posted for help on Dev7Studios support forum with no helpful replies and on other websites.
    My broken NSlider test can be seen at
    http://onlinewpthemetest.richard-dickinson.com/

    Maybe one day I might get it to work? I do hope so!……

  1. Want an Effective, Customizable Image Slider? Consider Nivo Slider | CSS Guru How to CSS

Leave a Reply

Want to be notified when someone replies? Subscribe to this post's comment RSS feed.
Any field marked with a * is required.