Getting started with the Nivo Slider jQuery Plugin

Video Tutorial

Install files

Installing the Nivo Slider jQuery plugin is actually pretty simple. You just need to add the Following code to the   <head> of your web page:

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

This will make sure all the required files are loaded properly. If you have the Nivo Slider CSS and Javascript files in a subfolder you will need to add it to the path. Note that the Nivo Slider jQuery plugin requires jQuery v1.7+ to work.

Add markup

The HTML markup for the Nivo Slider is also very simple. You simply need to create a div with an id (  #slider in this case) and add some images to it:

<div id="slider" class="nivoSlider">     
    <img src="images/slide1.jpg" alt="" />    
    <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>     
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />     
    <img src="images/slide4.jpg" alt="" /> 
</div> 
<div id="htmlcaption" class="nivo-html-caption">     
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. 
</div>

It is good practice to add the   nivoSlider class to the #slider div. We've also shown in this example how to set up HTML captions (the title of the img should be id of the div containing the HTML caption).

Hook up the slider

Finally you need to hook up the slider by adding the following code after the three links we included in the   <head>:

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

Note that the Nivo Slider uses the  $(window).on('load', function(){}) function and not  $(document).ready() that most other jQuery plugins use.