Nivo Slider

Jump to Download ↓

Ads by Yoggrt

Current Features

9 unique transition effects
Simple clean & valid markup
Loads of settings to tweak
Built in directional and control navigation
Packed version only weighs 7kb
Supports linking images
Keyboard Navigation
Free to use and abuse under the MIT license

See the Belorussian translation of this page.

Browser Support

Nivo Slider has been tested under the following browsers:

Internet Explorer v7+
Firefox v3+
Google Chrome v4
Safari v4
Opera v10.5

Demos & Showcase

Have a look at the demos to get an idea of what can be done with the Nivo Slider or check out the showcase of sites using the Nivo Slider. If you want your site in the showcase, then let me know and I'll get it up.

Usage

To use the Nivo Slider you have to include jQuery, the Nivo Slider script and the Nivo Slider CSS on your page:

<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

Next you need to add some HTML. Note that to add a caption you simply need to add a title attribute to the image. Linking of images is also supported as of v1.2:

<div id="slider">
	<img src="images/slide1.jpg" alt="" />
	<a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" /></a>
	<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
	<img src="images/slide4.jpg" alt="" />
</div>

Finally you need to hook up your script using the $(window).load() function:

<script type="text/javascript">
$(window).load(function() {
	$('#slider').nivoSlider();
});
</script>

The Nivo Slider has plenty of options to fiddle with. Below is an example of the code with all available options and their defaults:

<script type="text/javascript">
$(window).load(function() {
	$('#slider').nivoSlider({
		effect:'random', //Specify sets like: 'fold,fade,sliceDown'
		slices:15,
		animSpeed:500,
		pauseTime:3000,
		startSlide:0, //Set starting Slide (0 index)
		directionNav:true, //Next & Prev
		directionNavHide:true, //Only show on hover
		controlNav:true, //1,2,3...
		controlNavThumbs:false, //Use thumbnails for Control Nav
      controlNavThumbsFromRel:false, //Use image rel for thumbs
		controlNavThumbsSearch: '.jpg', //Replace this with...
		controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
		keyboardNav:true, //Use left & right arrows
		pauseOnHover:true, //Stop animation while hovering
		manualAdvance:false, //Force manual transitions
		captionOpacity:0.8, //Universal caption opacity
		beforeChange: function(){},
		afterChange: function(){},
		slideshowEnd: function(){} //Triggers after all slides have been shown
	});
});
</script>

The effect parameter can be any of the following:

sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random

Optional Enhancement

These rules are optional but are recommended to make the Nivo Slider look totally rad when you use it.

Use CSS to Stop Images Flashing Before Load
```
#slider {
	position:relative;
	//See the "style-pack" below for image
	background:url(images/loading.gif) no-repeat 50% 50%; 
}
#slider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
```
Due to the fact you have to use the $(window).load() function there is a delay before the plugin apply's certain styles to the elements. You can help this by manually applying the above CSS styles to stop the images flashing on the page before the plugin loads.
Make Sure Your Images are the Same Size

To stop the slider looking a bit weird make sure all of your images are the same size.

Start and Stop the Slider

To manually start and stop the slider you can use the following code:

$('#slider').data('nivo:vars').stop = true; //Stop the Slider
$('#slider').data('nivo:vars').stop = false; //Start the Slider

Multiple Sliders on the Same Page

The Nivo Slider does support multiple sliders on the same page however you must use jQuery v1.4.0 or greater for it to work.
Images dissapear in IE and Opera

If you are using links on all of your images they might do strange things in IE and Opera. To solve this simply add the following CSS rule:
```
#slider a{
	display:block;
}
```

Generate a Random Starting Slide

To use a random starting slide you can use the startSlide setting to do the following:

var total = $('#slider img').length;
var rand = Math.floor(Math.random()*total);
$('#slider').nivoSlider({
     startSlide:rand
});

Using Thumbnails with the Nivo Slider

Follow this tutorial to see how to use thumbnails with the slider.
Style Your Slider Like the One On This Site

You are expected to provide your own styles for the Nivo Slider. However for your benefit I have created a "style-pack" with the styles and images used for the slider on this page.
Click here to download.

Other Platforms

If you would like to use the Nivo Slider with Wordpress you can follow this tutorial which explains how it to set it up or use the Nivo Slider Wordpress Plugin.
Download the Nivo Slider or Views Nivo Slider Drupal modules.
Download the Nivo Slider Joomla module (HU).

Changelog

v2.0 - Several big changes:

Fixed bug where first image showed last link.
Fixed Opera bug where first load of slider would be 1px wide.
You can now specify "sets" of animations using a comma separated list for the effect setting (by toronegro).
Added the controlNavThumbsFromRel setting so that you can set image thumbnails from the image rel attribute (by nerd-sh).
Slider will not start if there is only 1 slide (by msielski).

v1.9 - Added startSlide setting. Made slide navigation still work even when slider has been stopped. Added the controlNavThumbs settings thanks to Jamie.

v1.8 - Added Keyboard Navigation using right & left arrows (can be disabled using the keyboardNav setting). Added captionOpacity setting and the slideshowEnd callback.

v1.7 - Added the ability to stop and start slider. Added manualAdvance setting thanks to Pablo.

v1.6 - Changed the License from GPL to MIT so it's easier to use the Nivo Slider commercially.

v1.5 - Fixed bug where if all slides had links, the slider would break.

v1.4 - Fixed bug where captions would keep fading if you kept clicking on the control nav for that slide.

v1.3 - Fixed bug where first slide link wasn't working.

v1.2 - Several big changes:

You can now wrap your images in links.
Animation will now restart after slide has been manually changed (by clicking the navigation controls).
Added the pauseOnHover setting so that you can set the animation to stop while hovering over the slider.
Bug where a strip was being left at the right of the slider has been fixed.

v1.1 - Added directionNavHide setting & afterChange callback. Navigation controls now become disabled until transition animation is finished.

v1.0 - Initial Version.

Support

If you find a bug with the Nivo Slider then please post an issue on the Github page. Please feel free to fork away on Github and make your own improvements.

If you have any other questions you can email me at gilbert@dev7studios.com or hit me up on twitter at @gilbitron. No promises I can help or even reply but I'll do my best.

If you enjoy this stuff and want more you can help me out by sharing this page or donating me some money. Why not buy me a beer?

Download

Please select a version of Nivo Slider to download:

Download Currently v2.0

Current Features

Browser Support

Demos & Showcase

Usage

Optional Enhancement

Use CSS to Stop Images Flashing Before Load

Make Sure Your Images are the Same Size

Start and Stop the Slider

Multiple Sliders on the Same Page

Images dissapear in IE and Opera

Generate a Random Starting Slide

Using Thumbnails with the Nivo Slider

Style Your Slider Like the One On This Site

Other Platforms

Changelog

Support

Download