title: jquery slider with controls and automatic scrolling
body: <p>Basically I am just trying to do random jQuery stuff for educational purpose, and here is my very simple slider. I want it to work automatically and also with controls (little arrows to scroll to next/previous slider). The only problem that I have right now is that when you press the arrow, the function that automatically switches slides every 5 seconds is still counting these 5000 ms, so the next slide appears faster then desired. What I want is to make those arrows reset the timer, so you press the arrow -> next slide appears -> only after 5 seconds later the slide switches again.
  Sorry for sloppy explanation, hope I made it clear enough.</p>
  
  <p>Here's the jsfiddle: <a href="http://jsfiddle.net/cA9aW/" rel="nofollow">http://jsfiddle.net/cA9aW/</a></p>
  
  <p>and here is the code</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="wrapper"&gt;
      &lt;header&gt;
           &lt;h1&gt;Simplest Sliding Image Slider&lt;/h1&gt;
  
      &lt;/header&gt;
      &lt;div id="content"&gt;
          &lt;div id="slider_container"&gt;
              &lt;div id="slider"&gt;
                  &lt;div class="slides" id="slide1"&gt;
                      &lt;img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt="" /&gt;
                  &lt;/div&gt;
                  &lt;div class="slides" id="slide2"&gt;
                      &lt;img src="http://s2.postimg.org/66f6us2wl/cats2.jpg" alt="" /&gt;
                  &lt;/div&gt;
                  &lt;div class="slides" id="slide3"&gt;
                      &lt;img src="http://s2.postimg.org/ai3sjs9th/cats3.jpg" alt="" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;footer&gt;&lt;/footer&gt;
      &lt;/div&gt;
  &lt;/body&gt;       
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>jQuery(document).ready(function($) {
  
  // start slider function
  startSlider();
  
  // set width and step variables and add active class to first slider
  var slideWidth = $('.slides').width();
  $('#slide1').addClass('slides active');
  
  // actual function
  function startSlider() {
  
  looper = setInterval(function() {
    // remove and add class active
    $('.active').removeClass('active').next().addClass('active');
  
    // animation expression
    $('.active').animate({'left': '-=' + (slideWidth) + 'px'}, 500);
    $('.active').siblings().animate({'left': '-=' + (slideWidth) + 'px'}, 500);
  
    // return to first slide after the last one
    if($('.active').length == 0) {
      $('#slide1').addClass('active');
      $('.slides').animate({'left': 0}, 500);
  
    }
  }, 5000); // interval
  
  
  // adding controls
  $('.slides').append("&lt;div class='controls'&gt;&lt;a class='control_left' href='#'&gt;&lt;/a&gt;&lt;a class='control_right' href='#'&gt;&lt;/a&gt;&lt;/div&gt;");
  
  // remove unnecessary controlls on first and last slides
  $('.slides:nth-child(1) a.control_left').remove();
  $(".slides:nth-child(" + $('.slides').length + ") a.control_right").remove();
  
  // add functionality to controls
  $('.control_left').on('click', function() {
    $('.active').removeClass('active').prev().addClass('active');
    $('.active').animate({'left': '+=' + (slideWidth) + 'px'}, 500);
    $('.active').siblings().animate({'left': '+=' + (slideWidth) + 'px'}, 500);
  });
  
  $('.control_right').on('click', function() {
    $('.active').removeClass('active').next().addClass('active');
    $('.active').animate({'left': '-=' + (slideWidth) + 'px'}, 500);
    $('.active').siblings().animate({'left': '-=' + (slideWidth) + 'px'}, 500);
  });
  
  
  
  }
  
  });
  </code></pre>
  
  <p>Thx a lot in advance</p>