Follow us

Tuesday, May 10, 2011

Jquery Image Slider - NivoSlider

Introduction

NivoSlider is a lightweight jQuery plugin for creating good-looking image sliders and offers amazing transition effects.

How to use NivoSlider?

Include Javascript Files

 <script src="Scripts/JQuery-1.4.3.js" type="text/javascript"></script>
 <script src="Scripts/jquery.nivo.slider.pack.js" type="text/javascript"></script>

Include CSS File

 <link href="Styles/nivo-slider.css" rel="stylesheet" type="text/css" />
  <link href="Styles/style.css" rel="stylesheet" type="text/css" />

HTML Formation

<div id="wrapper">
        <div id="slider-wrapper">
            <div id="slider" class="nivoSlider">
                <img src="Images/Technoscatter%20-%20Beaches.jpg" alt="" title="Beautiful Beaches" />
                <a href="http://technoscatter.blogspot.com">
                    <img src="Images/Technoscatter%20-%20Green%20Nature.jpg" alt="" title="Evergreen Nature" /></a>
                <img src="Images/Technoscatter%20-%20Orlando.jpg" alt="" title="NightLife in Orlando" />
                <img src="Images/Technoscatter%20-%20Paris.png" alt="" title="NightLife in Paris" />
                <img src="Images/Technoscatter%20-%20Paris2.png" alt="" title="NightLife in Paris" />
                <img src="Images/Technoscatter%20-%20Tokyo.png" alt="" title="#htmlcaption1" />
                <img src="Images/Technoscatter%20-%20Tokyo.png" alt="" title="#htmlcaption2" />
            </div>
            <div id="htmlcaption1" class="nivo-html-caption">
                Place to live in
            </div>
        </div>
 </div>
<div id="htmlcaption2" class="nivo-html-caption">
India Nightlife is the coolest and fastest growing nightlife
</div>

Call Jquery NivoSlider Plugin

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

Demo

Click here to see Demo.

Download Plugin

Sr.No Download Size
1 Jquery NivoSlider Plugin 927 KB

Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

0 comments: on "Jquery Image Slider - NivoSlider"

Post a Comment