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.

Media Manager Plus Integration

Sometimes you don’t want to upload images manually, you would rather pull them from your favorite image service. Nivo Slider integrates with our free Media Manager PlusWordPress plugin 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.

buyutucu pompa Spanish Fly

<link rel="stylesheet" href="nivo-slider.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

This will make sure all the required files are loaded properly. If you have the Nivo Slider CSS and Javascript files in a subfolder you will need to add it to the path. Note that the Nivo Slider jQuery plugin requires jQuery v1.7+ to work.

<div id="slider" class="nivoSlider">
<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>

Hook up the slider

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

$('#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 
});

• sliceDown
• sliceDownLeft
• sliceUp
• sliceUpLeft
• sliceUpDown
• sliceUpDownLeft
• fold
• fade
• random
• slideInRight
• slideInLeft
• boxRandom
• boxRain
• boxRainReverse
• boxRainGrow
• boxRainGrowReverse

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

<div class="slider-wrapper theme-default">
    <div class="ribbon"></div>
    <div id="slider" class="nivoSlider">
        ...
    </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.

<div id="slider">
    <img src="images/up.jpg" alt="" data-thumb="images/up_thumb.jpg" />
    <img src="images/monstersinc.jpg" alt="" data-thumb="images/monstersinc_thumb.jpg" />
    <img src="images/nemo.jpg" alt="" data-thumb="images/nemo_thumb.jpg" />
    <img src="images/walle.jpg" alt="" data-thumb="images/walle_thumb.jpg" />
</div>

<img src="images/slide1.jpg" alt="" data-transition="slideInLeft" />

The above code will force this slide to use the slideInLeft transition every time it appears. It overrides all other effect settings.