1. Download Nivo Slider.
2. Unzip the Nivo Slider package.
3. Copy jquery.nivo.slider.js into your skin folder, or add the script within an existing JS file.
4. If you copied the file in, add the following to your layout.master:
<portal:SkinFolderScript ID="sfs2" runat="server" ScriptFileName="jquery.nivo.slider.js" AddToCombinedScript="true" />
Note: If you already have a SkinfolderScript with the ID "sfs2", change the ID.
5. Copy the nivo-slider.css file into your skin folder, or copy the CSS from the nivo-slider.css file into an existing CSS file in your skin.
6. If you copied the css file into your skin folder, add the following to your style.config:
<file>nivo-slider.css</file>
7. Within the unzipped nivo-slider folder your downloaded, browse to "themes/default" and copy its contents into your skin folder. You may also copy the CSS into an existing CSS file in your skin. (Images must be copied into the root folder unless you change the CSS to find them in another location)
8. If you copied the file default.css into your skin folder, add the following to your style.config:
<file>default.css</file> (I suggest renaming this file, as default.css may be misleading to future users).
9. Add the following to your layout.master in the head:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Note: Optionally, you may add this script (excluding the <script /> tags), within an existing JS file.
10. Add the following HTML to a module on your page:
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="[yourimagesourcehere].jpg" data-thumb="[yourimagesourcehere].jpg" alt="" />
<img src="[yourimagesourcehere].jpg" data-thumb="[yourimagesourcehere].jpg" alt="" title="This is an example of a caption" />
<img src="[yourimagesourcehere].jpg" data-thumb="[yourimagesourcehere].jpg" alt="" data-transition="slideInLeft" />
<img src="[yourimagesourcehere].jpg" data-thumb="[yourimagesourcehere].jpg" alt="" title="#htmlcaption" />
</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>
</div>
11. Replace HTML for image sources with your images source, and you should be ready to go!
Please remember to read the license at Nivo Sliders website and make sure that your use of it is within the correct parameters.
I hope this helps,
-Isaac