Nivo Slider

2,017,111 Downloads and counting...

Features
Demos
Documentation
Support
Share
- Share on Twitter
- Share on Facebook
- Share on Google+

The world’s most awesome jQuery & WordPress Image Slider

The Nivo Slider is world renowned as the most beautiful and easy to use slider on the market. The jQuery plugin is completely free and totally open source, and there is literally no better way to make your website look totally stunning. If you don’t believe us, check out the list of features below and you soon will.

16 Beautiful Transition Effects

The Nivo Slider makes displaying your gallery of images a beautiful experience, by using amazing transition effects ranging from slicing and sliding to fading and folding. There simply is no better way to showcase your amazing work than to make the presentation of it looks just as beautiful.

Simple and Flexible Setup

The Nivo Slider was designed to be as simple to setup and use as it could possibly be. With a small bit of HTML and Javascript, you can have the slider up and running in a matter of minutes. However this doesn’t mean you can’t tweak the slider to your hearts content using the plethora of settings and style it using CSS.

Small, Semantic & Responsive

The Nivo Slider is also designed to have as small an impact as possible on your page load times, so the packed version only weighs 15kb. We also created the slider using the latest standards and made sure that everything is semantic and as compatible as possible. Oh yes and it’s completely responsive.

Free to Use & Abuse

The Nivo Slider jQuery plugin is open source and released under the MIT license. This means you can use it almost anywhere and for almost any kind of project, including personal and commercial websites and themes you make. It also means you can give back to the community by contributing your own improvements to the slider via GitHub.

Powerful & Simple Slider Creation

The Nivo Slider WordPress plugin makes it super easy to create and manage multiple sliders on your WordPress sites. Using the WordPress backend you can create as many sliders as you need and include them in your posts and pages using a simple shortcode. You don’t need to touch any code!

Multiple Slider Types

The Nivo Slider WordPress plugin allows you to choose between creating Manual sliders, where you manually upload and order images, Category & Sticky sliders, where post thumbnails from a certain category or “sticky” posts are used as the slider images, and Gallery sliders, where gallery images from a specified post are used as the slider images.

Automatic Image Cropping

The Nivo Slider WordPress plugin can automatically crop and resize your images to a size you specify, so you don’t have to worry about doing it manually yourself. So you don’t need to worry if your images are too big or too small, they will all come out the same size in the slider.

Slider Themes

The Nivo Slider WordPress plugin comes with a built in theme chooser which allows you to use some of the awesome pre-built themes with your slider automatically. This means your slider can look stunning without any extra work. Or if you prefer, don’t use a pre-built theme and create your own using CSS.

500px, Flickr & Instagram Integration

Sometimes you don’t want to upload images manually, you would rather pull them from your favorite image service. Nivo Slider integrates with 500px, Flickr & Instagram so you can automatically pull your latest mug shots from Instagram, get images from Flickr tagged “beach”, see your friends latest 500px shots, etc. You get the idea.

Demos

See the slider above. That’s actually a live demo of the Nivo Slider. Cool right?

If you want to see some more demo’s of the Nivo Slider, or want to check out how the WordPress plugin works then head on over to our Nivo Slider Demo site. Note that the demo site is fully responsive so try resizing your browser too.

FAQ
jQuery Plugin Usage
WordPress Plugin Usage
Advanced Tutorials
Changelog
License

FAQ

How do I use the Nivo Slider jQuery plugin?
Please follow this tutorial to learn how to use the Nivo Slider jQuery plugin.
How do I use the Nivo Slider WordPress plugin?
Please follow this tutorial to learn how to use the Nivo Slider WordPress plugin.
Does the slider support transparent PNG’s?
No. Due to the way slide transitions work it will look weird.
Can I use images that are different sizes?
As of v3.0 yes you can. The slider is now responsive and can handle images of any size.
Can I have multiple sliders on the same page?
Yes.

Can I start and stop the slider?

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

$('#slider').data('nivoslider').stop(); //Stop the Slider
$('#slider').data('nivoslider').start(); //Start the Slider

What do I do if I find a bug?
Please report all bugs on the Github issues page.

jQuery 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" class="nivo-slider.css" type="text/css" media="screen" />
<script src="/img/spacer.gif">

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:

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

Note: As of v3.0 the slider is responsive by default. If you want a fixed size slider, please make sure all of your images are the same size.

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
        controlNav: true, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        randomStart: false, // Start on a random slide
        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

`WordPress Plugin Usage`

Once you have purchased your copy of the Nivo Slider WordPress Plugin and downloaded it to your computer you will need to follow these steps to install the plugin in WordPress.

`Requirements`

Before we go ahead and install the plugin you need to make sure your WordPress install will be able to handle the plugin. You need to have at least the following running on your server:

WordPress 3.0
PHP 5.2
PHP GD (usually installed by default)

If you don’t have these or you don’t know what these are, it’s worth getting in touch with your hosting provider just to check.

`Installation`

Log in to your WordPress admin backend.
Go to the Plugins > Add New page.
Click on the Upload tab.
On this page click the Choose File button choose the Nivo Slider WordPress Plugin zip file that you previously downloaded.
Click the Install Now button and the plugin will be installed.
You should now see a Nivo Slider section in your main menu where you can create and manage your sliders.

`Usage`

Using the plugin is fairly straightforward. But just in case here is a short video demonstration on how to install and use the plugin.

`Advanced Tutorials`

For more advanced tutorials on using the Nivo Slider check out the articles on our support site.

`Changelog`

`jQuery Plugin`

v3.2 (16/1/2013) Several changes:

jQuery 1.9 compatibility fix
Fixed img src="/img/spacer.gif"> bug
Fixed links in IE bug

v3.1 (31/7/2012) Several changes:

Added 3 new responsive themes
Fixed “small image” bug in TwentyEleven WordPress theme
Removed directionNavHide setting
Added “Support Thumbs” to themes

v3.0.1 (31/5/2012) Fixed bug where slides with links would animate to zero height.

v3.0 (30/5/2012) Several changes:

The Nivo Slider is now responsive!
Fixed captions (removed p and the captionOpacity setting)
controlNavThumbs now use the “data-thumb” attribute
Removed the controlNavThumbsFromRel setting
Removed the controlNavThumbsSearch setting
Removed the controlNavThumbsReplace setting
Removed the keyboardNav setting

v2.7.1 (13/12/2011) Fixed the caption freezing bug.

v2.7 (16/11/2011) Several changes:

Added randomStart setting
Fixed flashing caption bug
Added the ability to set custom transitions per slide using the “data-transition” attribute

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.

`WordPress Plugin`

v1.9 (18/2/2013)

[New] Added 500px, Flickr and Instagram integration
[New] Option to specify how many images to show for non-Manual sliders
[New] Option to disable menu based on user role
[Changed] Updated Nivo Slider jQuery plugin to v3.2
[Changed] Automatic upgrades now powered by WP Updates
[Changed] Made edit/delete buttons on slider thumbs more obvious
[Fixed] Added return param to nivo_slider() template tag
[Fixed] Bug if only one image uploaded slider doesn’t show

v1.8.1 (3/8/2012)

[Fixed] array_merge() bug

v1.8 (31/7/2012)

[New] Added 3 new themes
[New] Set alt text of images on Manual sliders (auto set on other types of slider)
[New] Added “Custom Post Type” sliders
[New] Added nivo_slider() template tag
[New] Upload custom slider themes to the “wp-content/uploads/nivo-themes” folder (to avoid being overwritten on update)
[New] Set “nivo_image_link” custom post meta to override the image link for non-Manual sliders
[Changed] Updated Nivo Slider jQuery plugin to v3.1
[Changed] Removed “Hide Direction Navigation on Hover” option
[Changed] If theme doesn’t support thumbnails settings will be hidden
[Changed] If invalid slider ID/slug no message will be shown
[Fixed] General optimisation and bug fixing

v1.7.1 (31/5/2012)

[Changed] Updated Nivo Slider jQuery plugin to v3.0.1

v1.7 (30/5/2012)

[New] Added “Slider Sizing” option
[Changed] Updated Nivo Slider jQuery plugin to v3.0
[Changed] Removed “Keyboard Navigation” option
[Changed] Removed Orman and Pascal themes
[Fixed] Crop bug where uppercase extensions caused images to be resized all the time.

v1.6 (21/3/2012)

[New] Added favicon and “Useful Links” metabox
[Changed] The plugin updater script
[Fixed] The DIRECTORY_SEPARATOR bug
[Fixed] Automatic updating

v1.5.1 (1/3/2012)

[Fixed] The double slash in image URL bug

v1.5 (16/2/2012)

[New] Added new “Gallery” slider type
[Fixed] File doesn’t exist bug when resizing images
[Fixed] Thumbnails on default theme

v1.4.1 (13/12/2011)

[Fixed] Upgraded jQuery plugin to v2.7.1 to fix caption freezing bug

v1.4 (29/11/2011)

[Changed] Upgraded jQuery Nivo Slider script to v2.7
[Changed] File uploader is now Plupload
[Changed] File missing error now shows path instead of URL
[Changed] Pro version no longer exists
[Fixed] Warning when no themes exist
[Fixed] Automatic upgrading

v1.3 (20/10/2011)

[New] Added automatic upgrading to Single License Version of plugin
[Changed] Removed TimThumb and now use internal WordPress image resizing
[Changed] Removed “Disable Automatic Cropping” setting
[Changed] Include nivo-slider.css in header to stop flashing on load

v1.2.1 (22/9/2011)

[Fixed] Bug that caused sliders called in templates not to work

v1.2 (21/9/2011)

[Changed] Only load styles/scripts on pages that have a slider shortcode
[Changed] Exclude sliders from search results
[Changed] Attempt to make TimThumb cache writeable if it is not already

v1.1 (23/8/2011)

[Fixed] Bug where “undefined” errors would appear until you re-saved the slider
[Fixed] Bug where folder structure was wrong for pro version

v1.0 (18/8/2011)

[New] Added automatic update functionality to the Pro Version
[New] Added “Nivo Slider Pro” meta box to Single License Version
[Changed] Split plugin into “Single License Version” and “Pro Version”

v0.9 (8/8/2011)

[New] Added Thumbnail Navigation option
[New] You can now use the “slug” attribute in the shortcode to define a slider
[New] Added Multisite support for TimThumb URL’s
[New] Ability to use a random start slide
[Changed] Better error reporting when uploading images
[Changed] Upgraded TimThumb to v2.4
[Fixed] Bug where single image wouldn’t show once slider had loaded
[Fixed] Bug where images would attempt to upload even if the destination folder was read only

v0.8 (6/7/2011)

[New] Added ability to choose a Slider Theme (including 3 default themes)
[New] Captions can now contain certain HTML
[New] You can now see the images that will be in Category and Sticky sliders in the backend
[Changed] Upgraded to Nivo Slider v2.6
[Fixed] Added proper support for il8n
[Fixed] Bug where edit image icon was missing

v0.7 (21/6/2011)

[New] Added support for links and captions on “Manual” sliders
[New] Added option to disable image cropping (i.e. disable TimThumb)
[New] Added il8n support
[Changed] When adding a new slider values have defaults
[Fixed] Warning messages that appeared using WP_DEBUG

v0.6 (10/6/2011)

[New] Added slider shortcode dropdown to visual editor
[New] Added links and automatic captions to Category and Sticky sliders
[New] Added slideInRight and slideInLeft transitions
[Changed] Increased timthumb file dimension and size limits
[Changed] Upload Images box is now always visible with a message for Category and Sticky sliders
[Fixed] Sliders no longer appear at the top of posts rather than the shortcode location
[Fixed] Update notifications on the Slider add/edit pages

v0.5 (2/6/2011) Initial release

`Nivo Slider jQuery Plugin License`

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

`Nivo Slider WordPress Plugin License`

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see www.gnu.org/licenses/.

 Support
People who purchase our commercial products can receive support via our support forums where you can search our knowledge base articles, browse public discussions, or create a new discussion if you’re having trouble. Private requests can be made via the support forums contact page. Please note that only support requests submitted through the support forum will be answered (i.e. emails sent directly to us will be ignored).
Open 9am - 5pm (GMT) Visit our Support Forums

Dev7studios

The world’s most awesome jQuery & WordPress Image Slider

16 Beautiful Transition Effects

Simple and Flexible Setup

Small, Semantic & Responsive

Free to Use & Abuse

Powerful & Simple Slider Creation

Multiple Slider Types

Automatic Image Cropping

Slider Themes

500px, Flickr & Instagram Integration

Demos

FAQ

jQuery Plugin Usage

WordPress Plugin Usage

Requirements

Installation

Usage

Advanced Tutorials

Changelog

jQuery Plugin

WordPress Plugin

Nivo Slider jQuery Plugin License

Nivo Slider WordPress Plugin License

Support