Post
Ask Question

Image Slider Using jquery

In this blog we will make a simple jquery image Slider. We will use three files HTML, CSS and Javascript.

Step 1: HTML page

We are using <div id="slider"> having <ul class="slides"> having <li class="slide">

Trick:

Image in first and last Image is same. If you will not use this trick then there will be problem in flow of slides at last slide.

  1. <!Doctype html>  
  2. <html>  
  3. <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset-UTF-8"/>  
  5.             <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  
  6.         <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>  
  7.                 <script src="slider.js"></script>  
  8.         <link rel="stylesheet" href="slider.css" />  
  9.     </head>  
  10.     <body>  
  11.         <div class="container">  
  12.             <header>  
  13.                 <div id="slider">  
  14.                     <ul class="slides">  
  15.                         <li class="slide"><img src="images/apple.jpg"/></li>  
  16.                         <li class="slide"><img src="images/banana.jpg"/></li>  
  17.                         <li class="slide"><img src="images/blueberry.jpg"/></li>  
  18.                         <li class="slide"><img src="images/guava.jpg"/></li>  
  19.                         <li class="slide"><img src="images/jamun.jpg"/></li>  
  20.                         <li class="slide"><img src="images/apple.jpg"/></li>  
  21.   
  22.                     </ul>  
  23.                 </div>  
  24.             </header>  
  25.         </div>  
  26.     </body>  
  27. </html>  
Step 2: CSS

Now in CSS we have some tasks: 
  1. How to make visible only one image.
    =>We make slider with fixed width and height and use overflow as hidden.

  2. We have 5 images. So we keep width as 6000px.

  3. We want slider to float left. So we use slide class as float: left.
    1. #slider{  
    2.     width:900px;  
    3.     height:400px;  
    4.     margin: 10%;  
    5.     margin-left:15%;  
    6.     overflow:hidden;  
    7. }  
    8. .slides{  
    9.     display:block;  
    10.     width:6000px;  
    11.     height:400px;  
    12.     margin-left:0;  
    13.     padding:0;  
    14. }  
    15. .slide{  
    16.     float:left;  
    17.     list-style-type:none;  
    18.     width:900px;  
    19.     height:400px;  
    20. }  
    21. img{  
    22.     width:900px;  
    23.     height:400px;  
    24. }  

Step 3: Javascript

Below javascript code is responsible for smooth running slider.

  1. SetInterval(): We can automate a task based on time using the JavaScript setInterval() function which can be used to specify a regular time based trigger. The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed.

  2. We will do jquery selection at once only and use it again and again for faster selection.

  3. At a point all six image will pass then we have no image to show.
    => So, we use a callback function inside SetInterval() function.

    • We use var currentSlide = 1 and we will increase currentSlide by 1.

    • We check when currentSlide is at last image we again set currentSlide = 1.

    • We set left margin to 0. So we get first image again.
      1. $(function()
      2. {  
      3.     //value for animation  
      4.     var width = 900;  
      5.     var animationSpeed = 1000;  
      6.     var pause = 3000;  
      7.     var currentSlide = 1;  
      8.     //Dom element.   
      9.     var $slider = $('#slider');  
      10.     var $sliderAnimation = $slider.find('.slides');  
      11.     var $slides = $sliderAnimation.find('.slide');  
      12.   
      13.     setInterval(function()
      14.     {  
      15.          $sliderAnimation.animate({'margin-left': '-='+width}, animationSpeed, function(){  
      16.          currentSlide ++;  
      17.          if(currentSlide === $slides.length)  
      18.          {  
      19.                 $sliderAnimation.css('margin-left', 0);  
      20.                 currentSlide = 1;  
      21.          }  
      22.      });  
      23.     },pause);  
      24. });  
Next Recommended Reading Get Image Original Height and Width using jQuery