Nivo Slider - an awesome jquery slider with 9 unique transition effects

Inspired by Ronny Dee 's comment in my blog ,I want to introduce Nivo Slider jquery to you . It's an awesome Jquery plugin for slider with 9 unique transition effects ,and it look very professional like any Flash slide show .One of the most impressive slider I've seen .



you can see Live Demo here
 How about the effects? Cool? This plugin has been tested for most of popular browsers such as IE 7.0+ ,FireFox v3+ ,Chrome,Opera ,Safari ...so I don't think you will get trouble with browser when using this plugin .
Here is steps for install and use this plugin for your Blogger .

1, Download Nivoslider plugin from this site . Or you can download directly from this link .If you download this plugin from website ,you will see two version : production and development . Production is the version in which the code is encrypted for copyright protection . And the development is not encrypted . You can download both of them ,but development version is better .

2,Upload file nivo-slider.css and jquery.nivo.slider.js to a host . I recommend Google code for a speed and reliable hosting .

3,Create a HTML/Javascript widget in your Blogger blog .

4,Paste this code into widget content :

<link rel="stylesheet" href="your host .../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="your host .../jquery.nivo.slider.pack.js" type="text/javascript"></script> 

The code above include Jquery framework and nivoslider plugin to your site .

5,Paste this code right after the code in step 3 :

<style>
#slider {
    position:relative;
    -moz-box-shadow:0px 0px 10px #333;
    -webkit-box-shadow:0px 0px 10px #333;
    box-shadow:0px 0px 10px #333;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
}
#slider a {
    border:0;
}
.nivo-controlNav {
    position:absolute;
    left:47%;
    bottom:-30px;
}
.nivo-controlNav a {
    display:block;
    width:10px;
    height:10px;
    background:url(http://nivo.dev7studios.com/images/bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}
.nivo-controlNav a.active {
    background-position:-10px 0;
}

.nivo-directionNav a {
    display:block;
    width:32px;
    height:34px;
    background:url(http://nivo.dev7studios.com/images/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}
a.nivo-nextNav {
    background-position:-32px 0;
    right:10px;
}
a.nivo-prevNav {
    left:10px;
}
</style>
This CSS code will add arrows and bullets icons for navigation in NivoSlider . It also stop flashing images before this plugin loads .

6,The code of slider content.Paste it after the code in step 5
<div id="slider">
    <img src="images/slide1.jpg" alt="" />
    <a href="http://simplexdesign.blogspot.com"><img src="images/slide2.jpg" alt="" /></a>
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
...............
</div>
As you see ,in slider content ,you can add links and caption to images .Modify them and add more if you want .

7,Make this plugin work by adding an initial code :

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>
The initial code above is a simple one . Nivo slider has many options ,and here is the initial code with full option (and description for each option )
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'random',
        slices:15,
        animSpeed:500,
        pauseTime:3000,
        directionNav:true, //Next & Prev
        directionNavHide:true, //Only show on hover
        controlNav:true, //1,2,3...
        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>
each line is an option ,and you can add ,modify value or remove for adding or removing option . For example ,the line "keyboardNav:true, //Use left & right arrows" mean it allow using right-left arrow button on keyboard for slider navigation . If you don't allow using keyboard ,set the value to "false" . 

8,Save the widget and see what we have ^^


A note for you : Size of displaying slider depend on size of "#slider" element and images in slider . For example : to make a slider which has width : 700px , you have to set the width of slider element to 700px  ; like this
#slider {
width:700px;
}
and use images which have the width :700px for fullfill the slider element . If you use a smaller image ,you will see the slider with smaller size .
That's all . I hope you will find something interesting with this plugin .
Here is list of showcase for this plugin ,you can take a look for inspiration ^^

Supporters:
Check out Hosting Observer – your guide to finding more
reliable web hosting plans online.