Nivo Silder - 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

with images. Note that only images or images wrapped in links are allowed in the slider div. Any other HTML will break the slider.

Download a Free Version From Here : Download Nivo Silder 
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;
    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%;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.nivoSlider a {
    border:0;
    display:block;
}
.nivoSlider {
    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%;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.nivoSlider a {
    border:0;
    display:block;
} 

Finally you need to hook up your script using the $(window).load() function:

The Nivo Slider has plenty of options to fiddle with. Below is an example of the code with all available options and their defaults: 
The effect parameter can be any of the following:

sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft

etc...

Note: For Fix in IE & Opera Browsers (To Display Image) Use the Following Code in Style sheet.

#slider a{
    display:block;
}