title: How to put in previous and next function
body: <p>Can someone give me a hand with this script? I wonder how to put in previous and next function? Start and stop function is working great. Hope that script is readable ok. </p>
  
  <p>Another question.
  Is it possible to make previous and next function like when you press previous bttn that script stops and you need to press play bttn to start it again? </p>
  
  <p>Thanks for help. </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  // SET THIS VARIABLE FOR DELAY, 1000 = 1 SECOND
  var delayLength = 10000;
  
  function doMove(panelWidth, tooFar) {
      var leftValue = $("#mover").css("left");
  
      // Fix for IE
      if (leftValue == "auto") { leftValue = 0; };
  
      var movement = parseFloat(leftValue, 10) - panelWidth;
  
      if (movement == tooFar) {
          $(".slide img").animate({
              "top": -200
          }, function() {
              $("#mover").animate({
                  "left": 0
              }, function() {
                  $(".slide img").animate({
                      "top": 80
                  });
              });
          });
      }
      else {
          $(".slide img").animate({
              "top": -200
          }, function() {
              $("#mover").animate({
                  "left": movement
              }, function() {
                  $(".slide img").animate({
                      "top": 80
                  });
              });
          });
      }
  }
  
  jQuery(function($){
  
  
      var $slide1 = $("#slide-1");
  
      var panelWidth = $slide1.css("width");
      var panelPaddingLeft = $slide1.css("paddingLeft");
      var panelPaddingRight = $slide1.css("paddingRight");
  
      panelWidth = parseFloat(panelWidth, 10);
      panelPaddingLeft = parseFloat(panelPaddingLeft, 10);
      panelPaddingRight = parseFloat(panelPaddingRight, 10);
  
      panelWidth = panelWidth + panelPaddingLeft + panelPaddingRight;
  
      var numPanels = $(".slide").length;
      var tooFar = -(panelWidth * numPanels);
      var totalMoverwidth = numPanels * panelWidth;
      $("#mover").css("width", totalMoverwidth);
  
      $("#slider").append('&lt;a href="#2" id="slider-stopper"&gt;Stop&lt;/a&gt;');
  
      sliderIntervalID = setInterval(function(){
          doMove(panelWidth, tooFar);
      }, delayLength);
  
      $("#slider-stopper").click(function(){
          if ($(this).text() == "Stop") {
              clearInterval(sliderIntervalID);
              $(this).text("Start");
          }
          else {
              sliderIntervalID = setInterval(function(){
                  doMove(panelWidth, tooFar);
              }, delayLength);
              $(this).text("Stop");
          }
  
      });
  
  });
  &lt;/script&gt;
  </code></pre>