Nivo Slider - Awesome jQuery Slider Plugin

File Size: 375 KB
Views Total: 375486
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.

View more:

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.