Internet Resource

Do you want to make your site looks more stylish? Yep, the slider can help you a lot. There are a lot free slider out there, but finding one that combines every nifty feature in a simple, light, cross-browser-compatible package is still quite difficult. Nivo Slider is a simple and powerful jQuery image slider plug-in that fits the bill. And I do think the jQuery Nivo Slider is the best slideshow script.

Nivo Slider looks like Flash but uses the built in stability of jQuery. It can display pictures from your fileset with or without caption title. The Nivo Slider has nine unique transition effects built in, as well as plenty of options to fiddle with: for instance, you can define functions to be applied before and after the image has changed, set the animation speed and activate pause on hover.

These codes control the nivo slider:

<script type=”text/javascript”>
$(window).load(function() {
$(‘#slider’).nivoSlider({
effect:’random’, //Specify sets like: ‘fold,fade,sliceDown’
slices:15,
animSpeed:500,
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3…
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
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
</script>

This block features:

• 9 unique transitions to choose from or have them randomly applied.
• Optional keyboard navigation and pause on hover controls.
• External CSS file for easy customization.
• Optionally link each image to a separate url.
• Configurable animation speed, image display time and number of slices.
• Optional bullet or thumbnail navigation.

Usage:
Works well for headers but works anywhere on your page. Images should be pre-sized for your layout to avoid cropping.

The Nivo Slider images can be linked, and you can define image captions, which are displayed in a semi-transparent area. Also, you can optionally use CSS to stop images from flashing before they’re loaded, and you can define your own styles for the slider’s design. The slideshow works in IE 7+, Firefox 3+, Google Chrome 4+, Safari 4+ and Opera 10.5+. Its mark-up is simple, clean and valid.

Nivo Slider is released under the MIT license and so is absolutely free to use.

Here are some premium wordpress themes that use nivo slider without plugin, you can have a test.

Read more