تبلیغات
Nivo Slider - The Most Awesome jQuery Image Slider
dev7studios
This is an example of a HTML caption with a link.

Check out the official Nivo Slider WordPress Plugin

Current Features (v2.6)

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

Browser Support

Nivo Slider has been tested in the following browsers:

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

Demos

Have a look at the demos to get an idea of what can be done with the Nivo Slider.

Themes

Have a look at the theme demos to see the themes that come with the Nivo Slider.

Check out the official Nivo Slider WordPress Plugin

Usage

To use the Nivo Slider you have to include the following in your page:

  • jQuery
  • Nivo Slider script
  • Nivo Slider CSS
You also need to add some body 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.

<!-- Usually in the <head> section --><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> <!-- Then somewhere in the <body> section --><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>

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.

Then it helps to add some CSS to make the slider look good while it's loading:

#slider {    position:relative;    width:618px; /* Change this to your images width */    height:246px; /* Change this to your images height */    background:url(images/loading.gif) no-repeat 50% 50%;}#slider img {    position:absolute;    top:0px;    left:0px;    display:none;}#slider a {    border:0;    display:block;}

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, // 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        directionNavHide:true, // Only show on hover        controlNav:true, // 1,2,3... navigation        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        prevText: 'Prev', // Prev directionNav text        nextText: 'Next', // Next directionNav text        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    });});</script>

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 it to work. First of all you will need to include the theme in your page (a theme being simply a style sheet):

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

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">        <img src="images/toystory.jpg" alt="" />        <img src="images/up.jpg" alt="" title="This is an example of a caption" />        <img src="images/walle.jpg" alt="" />        <img src="images/nemo.jpg" alt="" />    </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.

Currently there are 3 themes that come with the Nivo Slider:

  • theme-default
  • theme-pascal
  • theme-orman

See the theme demos to get an idea of what the themes look like.

Advanced Usage

For more advanced examples of how to use the Nivo Slider see these tutorials:

Other Platforms

Check out the official Nivo Slider WordPress Plugin

Support

To find out how to get help with the Nivo Slider then please visit the Support Page which includes a FAQ.

If you enjoy this stuff and want more you can help me out by sharing this page or donating me some money. Why not buy me a beer?

Changelog

v2.6 (22/6/2011)
Added 3 themes to the slider (Default, Pascal and Orman).

v2.5.2 (23/5/2011)
Fixed bug so that the Nivo Slider now works with jQuery 1.6+

v2.5.1 (23/3/2011)
Added two new slider transitions: boxRainGrow and boxRainGrowReverse.

v2.5 (17/3/2011)
Several changes:

  • Added three new slider transitions: boxRandom, boxRain and boxRainReverse.
  • Several code tweaks and performance improvements.
  • Added ability to set Prev and Next directionNav text using prevText and nextText settings.

v2.4 (24/1/2011)
Several changes:

  • Added two new slider transitions: slideInLeft and slideInRight.
  • Fixed bug when using a "set" of effects.
  • Added private resetSliceWidth() function.

v2.3.1 (21/12/2010)
Fixed bug where images weren't appearing because the background CSS declaration had no quotes.

v2.3 (11/11/2010)
Download is now a single file that includes a demo. Small bug fix where vars was undefined.

v2.2 (8/11/2010)
Several changes:

  • Added start() and stop() functions.
  • Added lastSlide() callback.
  • Reorganized the structure of the Slider code.
  • Added afterLoad() callback.

v2.1 (19/8/2010)
Several changes:

  • Support for HTML captions.
  • Fixed bug where controlNav started at 0.
  • Fixed Prototype conflict with reverse().

v2.0 (26/5/2010)
Several big changes:

  • Fixed bug where first image showed last link.
  • Fixed Opera bug where first load of slider would be 1px wide.
  • You can now specify "sets" of animations using a comma separated list for the effect setting (by toronegro).
  • Added the controlNavThumbsFromRel setting so that you can set image thumbnails from the image rel attribute (by nerd-sh).
  • Slider will not start if there is only 1 slide (by msielski).

v1.9 (16/4/2010)
Added startSlide setting. Made slide navigation still work even when slider has been stopped. Added the controlNavThumbs settings thanks to Jamie.

v1.8 (7/4/2010)
Added Keyboard Navigation using right & left arrows (can be disabled using the keyboardNav setting). Added captionOpacity setting and the slideshowEnd callback.

v1.7 (30/3/2010)
Added the ability to stop and start slider. Added manualAdvance setting thanks to Pablo.

v1.6 (27/3/2010)
Changed the License from GPL to MIT so it's easier to use the Nivo Slider commercially.

v1.5 (25/3/2010)
Fixed bug where if all slides had links, the slider would break.

v1.4 (25/3/2010)
Fixed bug where captions would keep fading if you kept clicking on the control nav for that slide.

v1.3 (24/3/2010)
Fixed bug where first slide link wasn't working.

v1.2 (24/3/2010)
Several big changes:

  • You can now wrap your images in links.
  • Animation will now restart after slide has been manually changed (by clicking the navigation controls).
  • Added the pauseOnHover setting so that you can set the animation to stop while hovering over the slider.
  • Bug where a strip was being left at the right of the slider has been fixed.

v1.1 (21/3/2010)
Added directionNavHide setting & afterChange callback. Navigation controls now become disabled until transition animation is finished.

v1.0 (20/3/2010)
Initial Version.