The Nivo slider plug-in
The Nivo is a jQuery slider that is quite popular in the market and an easy to use plug-in that you may deploy in your website freely.
The plug-in can be downloaded from the developer’s page at Github website which JS file size is only 30Kb. The downloaded package also contains a few CSS files that define the theme of slides. You may also customize those themes as per the taste or needs of your website.
In the following section, I will show you the live demos of using the jQuery Nivo slider along with the code and on the way, you may also see how to setup this slider into your website or blog.
A demo of sliding four images with different effects
In this slider demo, four images are sliding along with captions. The slides move automatically or you may use the arrows for moving to next and previous slide. Besides, you may also see the small circles at the center bottom if you want to move to a particular number of slide directly. Have a look by clicking the link or image below:
See online demo and code
The markup for this example:
<div id="wrapper"> <div class="slider-wrapper theme-default"> <div id="jquery-slider-demo" class="nivoSlider"> <img src="images/toystory.jpg" alt="The slide 1" /> <a href="#"><img src="images/up.jpg" alt="The slide 2" title="The caption comes here" /></a> <img src="images/walle.jpg" alt="The slide 3" data-transition="slideInLeft" /> <img src="images/nemo.jpg" alt="The slide 4" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption"> <strong>And you may use </strong> <em>HTML</em> captions with <a href="#">links</a>. </div> </div> </div>
The script:
<script type="text/javascript">
$(window).load(function() {
$('#jquery-slider-demo').nivoSlider();
});
</script>
You may see the dependency files included in the <head> and <body> sections on the demo page.
A demo of slideshow with thumbnails
If you want to display the small thumbnail of images in slide then you may use the controlNavThumbs option in the jQuery code. Just set its value as true:
controlNavThumbs: true
Besides, you have to provide thumbnail images in the markup section by using the data-thumb attribute in the <img> tag that also specifies the slide image.
See the following demo with the same set of images used in the slide as in above example. For the demo, the same images also act as thumbnails:
See online demo and code
In a live website, you would want to use the smaller images as thumbnails with different names If located in the same directory). Also, you noticed, the small circles are disappeared in this demo.
The markup with data-thumb data attributes:
<div id="wrapper"> <div class="slider-wrapper theme-default"> <div id="jquery-slider-demo" class="nivoSlider"> <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="The slide 1" /> <a href="#"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="The slide 2" title="The caption comes here" /></a> <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="The slide 3" data-transition="slideInLeft" /> <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="The slide 4" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption"> <strong>And you may use </strong> <em>HTML</em> captions with <a href="#">links</a>. </div> </div> </div>
The script with the controlNavThumbs option:
<script type="text/javascript">
$(window).load(function() {
$('#jquery-slider-demo').nivoSlider({
controlNavThumbs: true
});
});
</script>
A demo of using sliding effects in images
You may apply different sliding effects by using the data-transition data attribute. The slider plug-in offers a few options that you may use for sliding images including:
- sliceUpDownLeft
- sliceUpDownLeft
- fade
- sliceUpDown
- sliceUpLeft
- sliceDownLeft
- sliceDown
- boxRainGrow
- boxRain
- boxRainReverse
- boxRainGrowReverse
See the following demo where I used four different effects in sliding images:
See online demo and code
The markup:
<div id="wrapper"> <div class="slider-wrapper theme-default"> <div id="jquery-slider-demo" class="nivoSlider"> <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" data-transition="sliceUpDownLeft" alt="The slide 1" /> <a href="#"><img src="images/up.jpg" data-thumb="images/up.jpg" data-transition="boxRandom" alt="The slide 2" title="The caption comes here" /></a> <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="The slide 3" data-transition="fade" /> <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" data-transition="boxRainReverse" alt="The slide 4" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption"> <strong>And you may use </strong> <em>HTML</em> captions with <a href="#">links</a>. </div> </div> </div>
The same script is used as in above example with thumbnails. You may also set the effect in the jQuery code by using the effect option.
Other useful options in the slider
This awesome jQuery based plug-in has plenty of other options that you may set in the jQuery code. For example:
- slices : 20 // This is for the sliced animation where you may set the number of slices of image.
- animSpeed: 600 //Sets the speed of transition. The speed is in milliseconds.
- pauseTime: 2500 // This option sets the delay or until the current slide is visible. This is also set in milliseconds.
- startSlide: 3 //This sets the zero-based index slide that you want to start as web page loads.
The plug-in has many other options that you may explore or by reading the detailed documentation.
A demo with a few options set in jQuery code
In this demo, a few options are used for setting the animation speed, starting slide, number of slices for the slice effect which is the first slide. The box columns and rows are also set for the slide number two and four. The animation speed is set as 1.5 seconds while slide will pause on mouse hover:
Online demo and code
The script:
<script type="text/javascript">
$(window).load(function() {
$('#jquery-slider-demo').nivoSlider({
controlNavThumbs: true,
slices: 35,
animSpeed: 1500,
startSlide: 2,
pauseOnHover: true,
boxCols: 5,
boxRows: 3
});
});
</script>
The markup is the same as in the above two examples.