Nivo Slider jQuery Plugin

Download: http://dev7studios.com/plugins/nivo-slider

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).load(function() {
    $('#slider').nivoSlider();
});
</script>

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

Play with settings

The Nivo Slider has plenty of settings to fiddle with. Below is an example of the code with all available options and their defaults:

$('#slider').nivoSlider({
    effect: 'random',               // Specify sets like: 'fold,fade,sliceDown'
    slices: 15,                     // For slice animations
    boxCols: 8,                     // For box animations
    boxRows: 4,                     // For box animations
    animSpeed: 500,                 // Slide transition speed
    pauseTime: 3000,                // How long each slide will show
    startSlide: 0,                  // Set starting Slide (0 index)
    directionNav: true,             // Next & Prev navigation
    controlNav: true,               // 1,2,3... navigation
    controlNavThumbs: false,        // Use thumbnails for Control Nav
    pauseOnHover: true,             // Stop animation while hovering
    manualAdvance: false,           // Force manual transitions
    prevText: 'Prev',               // Prev directionNav text
    nextText: 'Next',               // Next directionNav text
    randomStart: false,             // Start on a random slide
    beforeChange: function(){},     // Triggers before a slide transition
    afterChange: function(){},      // Triggers after a slide transition
    slideshowEnd: function(){},     // Triggers after all slides have been shown
    lastSlide: function(){},        // Triggers when last slide is shown
    afterLoad: function(){}         // Triggers when slider has loaded
});

The effect parameter can be any of the following:

  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • fade
  • random
  • slideInRight
  • slideInLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse

Using themes

To use themes with the Nivo Slider you will have to carry out a few more steps to get the theme to work. First you will need to include the theme in your page (a theme is simply a stylesheet):

<!-- Include the theme stylesheet in the <head> section -->
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" />

Then you will need to tweak your HTML and make sure it is in the following format:

<div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div id="slider" class="nivoSlider">
        ...
    </div>
</div>

Now you can call jQuery as normal and your slider should look beautiful with the new theme showing. Note: You can load as many themes (stylesheets) as you want in the <head> section, however they will not be applied to the slider until you add the class theme-{theme name} to the slider-wrapper div.

Using thumbnails

To use thumbnails with your slider you need to make sure controlNavThumbs is set to true. Then the slider will look for the URL of the thumbnail in the data-thumb attribute of the image. If no URL is provided, no thumbnail will be shown. For example:

<div id="slider">
    <img src="images/up.jpg" alt="" data-thumb="images/up_thumb.jpg" />
    <img src="images/monstersinc.jpg" alt="" data-thumb="images/monstersinc_thumb.jpg" />
    <img src="images/nemo.jpg" alt="" data-thumb="images/nemo_thumb.jpg" />
    <img src="images/walle.jpg" alt="" data-thumb="images/walle_thumb.jpg" />
</div>

Custom transitions per slide

You can override a slides transition using the data-transition attribute. For example:

<img src="images/slide1.jpg" alt="" data-transition="slideInLeft" />

The above code will force this slide to use the slideInLeft transition every time it appears. It overrides all other effect settings.