title: How to make a automatic image slider.?
body: <p>I have a image slider. Following is screen shot of slider.
  <img src="https://i.stack.imgur.com/keVXj.png" alt="enter image description here"></p>
  
  <p>This is working fine.. It changes image on clicking next or previous arrow..
  But I want to change images automatic also means on some time interval image should change automatically. I have googled much but I am not getting how to do it.. Please help me out from this issue...</p>
  
  <p>Thanks in advance...</p>
  
  <p>Following is Code:</p>
  
  <pre><code>&lt;div id="slideshow"&gt;
          &lt;ul class="slides"&gt;
              &lt;li class="sl"&gt;&lt;img class="ss" src="image/a.png" width="191" height="278" alt="Splash Screen" /&gt;&lt;/li&gt;
              &lt;li class="sl"&gt;&lt;img class="ss" src="image/b.png" width="191" height="278" alt="Select Route" /&gt;&lt;/li&gt;
              &lt;li class="sl"&gt;&lt;img class="ss" src="image/c.png" width="191" height="278" alt="New Schedule" /&gt;&lt;/li&gt;
              &lt;li class="sl"&gt;&lt;img class="ss" src="image/d.png" width="191" height="278" alt="Created Routes" /&gt;&lt;/li&gt;
              &lt;li class="sl"&gt;&lt;img class="ss" src="image/e.png" width="191" height="278" alt="CR" /&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;span class="arrow next"&gt;&lt;/span&gt;
          &lt;span class="arrow previous"&gt;&lt;/span&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Following is CSS:</p>
  
  <pre><code>#slideshow{
      background:url(res/iphone_small.png) no-repeat;
      height:512px;
      /*margin:auto 30px;*/
      margin:50px 25px auto;
      position:relative;
      width:257px;
  }
  
  #slideshow ul{
      height:300px;
      left:33px;
      list-style:none outside none;
      overflow:hidden;
      position:absolute;
      top:78px;
      width:257px;
  }
  
  #slideshow li{
      position:absolute;
      display:none;
      z-index:10;
  }
  
  #slideshow li:first-child{
      display:block;
      z-index:1000;
  }
  
  #slideshow .slideActive{
      z-index:1000;
  }
  
  #slideshow canvas{
      display:none;
      position:absolute;
      z-index:100;
  }
  
  #slideshow .arrow{
      height:64px;
      width:45px;
      position:absolute;
      background:url('res/arrows.png') no-repeat;
      top:50%;
      margin-top:-55px;
      cursor:pointer;
      z-index:5000;
      margin-left:240px;
      margin-right:240px;
  }
  
  #slideshow .previous{ background-position:right top;right:0;}
  #slideshow .previous:hover{ background-position:right bottom;}
  
  #slideshow .next{ background-position:left top;left:0;}
  #slideshow .next:hover{ background-position:left bottom;}
  </code></pre>
  
  <p>Following is js file:</p>
  
  <pre><code>$(window).load(function(){
  
      // We are listening to the window.load event, so we can be sure
      // that the images in the slideshow are loaded properly.
  
  
      // Testing wether the current browser supports the canvas element:
      var supportCanvas = 'getContext' in document.createElement('canvas');
  
      // The canvas manipulations of the images are CPU intensive,
      // this is why we are using setTimeout to make them asynchronous
      // and improve the responsiveness of the page.
  
      var slides = $('#slideshow li'),
          current = 0,
          slideshow = {width:0,height:0};
  
      setTimeout(function(){
  
          window.console &amp;&amp; window.console.time &amp;&amp; console.time('Generated In');
  
          if(supportCanvas){
              $('#slideshow img').each(function(){
  
                  if(!slideshow.width){
                      // Taking the dimensions of the first image:
                      slideshow.width = this.width;
                      slideshow.height = this.height;
                  }
  
                  // Rendering the modified versions of the images:
                  createCanvasOverlay(this);
              });
          }
  
          window.console &amp;&amp; window.console.timeEnd &amp;&amp; console.timeEnd('Generated In');
  
          $('#slideshow .arrow').click(function(){
              var li          = slides.eq(current),
                  canvas      = li.find('canvas'),
                  nextIndex   = 0;
  
              // Depending on whether this is the next or previous
              // arrow, calculate the index of the next slide accordingly.
  
              if($(this).hasClass('next')){
                  nextIndex = current &gt;= slides.length-1 ? 0 : current+1;
              }
              else {
                  nextIndex = current &lt;= 0 ? slides.length-1 : current-1;
              }
  
              var next = slides.eq(nextIndex);
  
              /*if(supportCanvas){
  
                  // This browser supports canvas, fade it into view:
  
                  canvas.fadeIn(function(){
  
                      // Show the next slide below the current one:
                      next.show();
                      current = nextIndex;
  
                      // Fade the current slide out of view:
                      li.fadeOut(function(){
                          li.removeClass('slideActive');
                          canvas.hide();
                          next.addClass('slideActive');
                      });
                  });
              }
              else {*/
  
                  // This browser does not support canvas.
                  // Use the plain version of the slideshow.
  
                  current=nextIndex;
                  next.addClass('slideActive').show();
                  li.removeClass('slideActive').hide();
              //}
          });
  
      },100);
  
      // This function takes an image and renders
      // a version of it similar to the Overlay blending
      // mode in Photoshop.
  
      function createCanvasOverlay(image){
  
          var canvas          = document.createElement('canvas'),
              canvasContext   = canvas.getContext("2d");
  
          // Make it the same size as the image
          canvas.width = slideshow.width;
          canvas.height = slideshow.height;
  
          // Drawing the default version of the image on the canvas:
          canvasContext.drawImage(image,0,0);
  
  
          // Taking the image data and storing it in the imageData array:
          var imageData   = canvasContext.getImageData(0,0,canvas.width,canvas.height),
              data        = imageData.data;
  
          // Loop through all the pixels in the imageData array, and modify
          // the red, green, and blue color values.
  
          for(var i = 0,z=data.length;i&lt;z;i++){
  
              // The values for red, green and blue are consecutive elements
              // in the imageData array. We modify the three of them at once:
  
              data[i] = ((data[i] &lt; 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
              data[++i] = ((data[i] &lt; 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
              data[++i] = ((data[i] &lt; 128) ? (2*data[i]*data[i] / 255) : (255 - 2 * (255 - data[i]) * (255 - data[i]) / 255));
  
              // After the RGB elements is the alpha value, but we leave it the same.
              ++i;
          }
  
          // Putting the modified imageData back to the canvas.
          canvasContext.putImageData(imageData,0,0);
  
          // Inserting the canvas in the DOM, before the image:
          image.parentNode.insertBefore(canvas,image);
      }
  
  });
  </code></pre>