Have a look at the demos to get an idea of what can be done with the Nivo Slider or check out the showcase of sites using the Nivo Slider. If you want your site in the showcase, then let me know and I'll get it up.

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.4.2/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
These rules are optional but are recommended to make the Nivo Slider look totally rad when you use it.


#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.


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


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