Features

• 16 unique transition effects
• Simple clean & valid markup
• Loads of settings to tweak
• Built in directional and control navigation
• Packed version only weighs 7kb
• Supports linking images
• Keyboard Navigation
• HTML Captions
• Free to use and abuse under the MIT license

Support

Nivo Slider has been tested in the following browsers:

• Internet Explorer v7+
• Firefox v3+
• Google Chrome v4
• Safari v4
• Opera v10.5

To use the Nivo Slider you have to include jQuery, the Nivo Slider script and the Nivo Slider CSS on your page:

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

Next you need to add some HTML. This is ususally just a div with images. Note that only images or images wrapped in links are allowed in the slider div. Any other HTML will break the slider.
To add a caption to an image you simply need to add a title attribute to the image. To add an HTML Caption simply set the title attribute to the ID of a element that contains your caption (prefixed with a hash). Note that the HTML element that contains your caption must have the CSS class nivo-html-caption applied and must be outside of the slider div.
Linking of images is also supported as of v1.2:

<div id="slider">
 <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>

Finally you need to hook up your script using the $(window).load() function:

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

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

<script type="text/javascript">
$(window).load(function() {
 $('#slider').nivoSlider({
  effect:'random', //Specify sets like: 'fold,fade,sliceDown'
  slices:15,
  animSpeed:500, //Slide transition speed
  pauseTime:3000,
  startSlide:0, //Set starting Slide (0 index)
  directionNav:true, //Next & Prev
  directionNavHide:true, //Only show on hover
  controlNav:true, //1,2,3...
  controlNavThumbs:false, //Use thumbnails for Control Nav
      controlNavThumbsFromRel:false, //Use image rel for thumbs
  controlNavThumbsSearch: '.jpg', //Replace this with...
  controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
  keyboardNav:true, //Use left & right arrows
  pauseOnHover:true, //Stop animation while hovering
  manualAdvance:false, //Force manual transitions
  captionOpacity:0.8, //Universal caption opacity
  beforeChange: function(){},
  afterChange: function(){},
  slideshowEnd: function(){} //Triggers after all slides have been shown
 });
});
</script>

The effect parameter can be any of the following:

• sliceDown
• sliceDownLeft
• sliceUp
• sliceUpLeft
• sliceUpDown
• sliceUpDownLeft
• fold
• fade
• random

Optional Enhancement

These rules are optional but are recommended to make the Nivo Slider look totally rad when you use it.

Use CSS to Stop Images Flashing Before Load

#slider {
 position:relative;
 //See the "style-pack" below for image
 background:url(images/loading.gif) no-repeat 50% 50%; 
}
#slider img {
 position:absolute;
 top:0px;
 left:0px;
 display:none;
}

• Due to the fact you have to use the $(window).load() function there is a delay before the plugin apply's certain styles to the elements. You can help this by manually applying the above CSS styles to stop the images flashing on the page before the plugin loads.

• Make Sure Your Images are the Same Size

  To stop the slider looking a bit weird make sure all of your images are the same size.

• Start and Stop the Slider

  To manually start and stop the slider you can use the following code:

$('#slider').data('nivo:vars').stop = true; //Stop the Slider
$('#slider').data('nivo:vars').stop = false; //Start the Slider

• Sliders on the Same Page

  The Nivo Slider does support multiple sliders on the same page however you must use jQuery v1.4.0 or greater for it to work.

• Images dissapear in IE and Opera

  If you are using links on all of your images they might do strange things in IE and Opera. To solve this simply add the following CSS rule:

#slider a{
 display:block;
}

a Random Starting Slide

To use a random starting slide you can use the startSlide setting to do the following:

var total = $('#slider img').length;
var rand = Math.floor(Math.random()*total);
$('#slider').nivoSlider({
     startSlide:rand
});