Standard

Sretched

Navigation

Backgrounds
This is an example of a HTML caption with a link.

Nivo Slider UsageHomeCodes › Nivo Slider Usage

Nivo Slider

Nivo Slider by dev7studios is a jQuery image slideshow. You can check out documentation, usage and support at the Nivo Slider homepage.


Images

Use the Slider PSD'S supplied to create images the right width and height.


Javascript

Make sure these are located in the <head> above. jQuery is also required.

<link rel="stylesheet" href="scripts/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="scripts/nivo-slider/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/nivo-slider/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
pauseTime:9000,
controlNav: false
});

});
</script>

HTML

<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<a href="#"><img src="image-location.jpg" alt="" title="caption here" /></a> <img src="images/image-location.jpg" alt="" />
<img src="images/image-location.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>

This example shows two types of captions:

Title Caption - using the title in the image to generate a caption.

HTML Caption - By using a div after the slide you can create HTML captions with links!


Official Documentation and Support

Official documentation located at nivo.dev7studios.com.