0 Integrating Image slider to a Web Page

image slider Jquery slider tutorial web page

In this tutorial step by step i am going to expalin that how you can integrate slider into your web application.

Prerequisite

Download thie required files . i packed all required files in a zip , click Here to download zip if you Downloded the files . then extract them and folllow these steps.

1. create a New HTML file or if you want to integrate in existing Page . create a New div tag whre ever you want and follow next step
2. Copy all files to your project directory if you want to add this to existing Project
3. add following files to your Headerof the Page

      
        <link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="themes/light/light.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="themes/dark/dark.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="themes/bar/bar.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
      
      

4. Add Following HTML to the Page

     
     <div class="slider-wrapper theme-default">
               <div id="slider" class="nivoSlider">
                   <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
                   <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
                   <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
                   <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
               </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>
           </div>
     
     

   • In this above code img tag contain your sliding image . add as many as you want . yoou can replce image source to your own image source.
   • data-thumb attribute contains the thumbnail image url.
   • title attribute contains the caption you want to display
5. Add following to bottom of your Page. we are adding at bottom so these scripts are loded after other load completes so deosn't affect your Page data.

   
     <script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
       <script type="text/javascript" src="jquery.nivo.slider.js"></script>
       <script type="text/javascript">
       $(window).load(function() {
           $('#slider').nivoSlider();
       });
       </script>
    

6. if you still have doubt you can open demo.html and see the sample code.