Nivo Slider – Awesome jQuery Slider Plugin

Nivo Slider is considered as a most popular jQuery slider plugin in the world. It is beautiful and very easy to use, more over, it is full free! Nivo Slider includes 16 Beautiful Transition Effects that makes displaying your gallery of images a beautiful experience as well as designed to be as simple to setup and use.

Basic Usage:

1. Include jQuery Nivo Slider CSS and a theme css on your webpage

<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />

2. Create the html

<div id="slider" class="nivoSlider"> 
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" /> 
<img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" /> 
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" /> 
</div>

3. Include jQuery library and jQuery Nivo Slider on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.nivo.slider.js"></script>

4. Call the plugin

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

5. Options.

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random',
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3000,
startSlide: 0,
directionNav: true,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: true,
manualAdvance: false,
prevText: 'Prev',
nextText: 'Next',
randomStart: false,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
});
});
</script>

This awesome jQuery plugin is developed by gilbitron. For more Advanced Usages, please check the demo page or visit the official website.

Demo Link

Download Link