Jump to Download ↓
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 SliderMultiple 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
startSlidesetting 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
effectsetting (by toronegro). - Added the
controlNavThumbsFromRelsetting 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
pauseOnHoversetting 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
