title: How to stop all animation in this image slider carousel UNLESS the arrow is clicked?
body: <p>The carousel is located at <a href="http://www.indicatorwarehouse.com/index-3-27-11.html" rel="nofollow">http://www.indicatorwarehouse.com/index-3-27-11.html</a></p>
  
  <p>What the site owner wants to do is have the image slider stay still unless someone clicks the green arrows, and then it will move just once. Alternatively, he wants it to slide VERY slownly, perhaps once every 5 minutes. The code for this slider is below...please bear in mind I have no clue what any of this code means, I'm a total novice with js. Thank you very much! :)</p>
  
  <pre><code>$(document).ready(function(){
      $('#sliderGallery').Slider();
  });
  
  (function($){
  $.fn.Slider = function(params){
      var defaults = {
          moveLeft: true,
          onItem: false,
          isAnimating: false,
          timer: null
      },
      intialize = function(id){
  
  /////////////////////////////////////////////////////////////
  /////     Bind Hover Events on Left &amp; Right Buttons     /////
  /////////////////////////////////////////////////////////////
          $('div#leftButton').hover(function(){
              $(this).addClass('leftImageHov');
              clearInterval(defaults.timer);
          },function(){
              $(this).removeClass('leftImageHov');
              setTimer();
          });
          $('div#rightButton').hover(function(){
              $(this).addClass('rightImageHov');
              clearInterval(defaults.timer);
          },function(){
              $(this).removeClass('rightImageHov');
              setTimer();
          });
  
  /////////////////////////////////////////////////////////////
  /////         Stop Animation on Hovering Items          /////
  /////////////////////////////////////////////////////////////
          $('#canvas ul li').hover(function(){
              clearInterval(defaults.timer);
          },function(){
              setTimer();
          });
  
  /////////////////////////////////////////////////////////////
  /////        Get Size of the #Canvas ul &amp; Set It        /////
  /////////////////////////////////////////////////////////////
          var li = $('#canvas ul li');
          var liWidth = li.eq(0).width();
          var liCount = li.length;
          $('#canvas ul').css({width: liWidth*liCount + 'px', left: '0px'});
  
  /////////////////////////////////////////////////////////////
  /////    Bind Click Event on the Left &amp; Right Buttons   /////
  /////////////////////////////////////////////////////////////   
          var leftLimit = (liWidth*liCount) - $('div#canvas').width();
          $('div#leftButton').click(function(){
              if(!defaults.isAnimating)
                  Animate(liWidth, 600, leftLimit);
          });
          $('div#rightButton').click(function(){
              if(!defaults.isAnimating)
                  Animate((-1*liWidth), 600, leftLimit);
          }); 
  
          setTimer();
      },
      setTimer = function(){
          defaults.timer = setInterval(doAnimation, 30000 );      
      },
      Animate = function(amount, time, leftLimit){
          defaults.isAnimating = true;
          var leftVal = $('div#canvas ul').css('left');
          leftVal = leftVal.replace('px','');
          leftVal = leftVal*1;
          amount += leftVal;
  
  /////////////////////////////////////////////////////////////
  /////                    Range Check                    /////
  /////////////////////////////////////////////////////////////   
          if(amount &lt; (-1*leftLimit)) { amount = (-1*leftLimit); defaults.moveLeft = false; }
          if(amount &gt; 0) { amount = 0; defaults.moveLeft = true; }
  
          $('div#canvas ul').animate({
              left: amount
          }, time, function() { defaults.isAnimating=false; });
      },
  
  /////////////////////////////////////////////////////////////
  /////                     Animation                     /////
  /////////////////////////////////////////////////////////////
      doAnimation = function(){
          var li = $('#canvas ul li');
          var liWidth = li.eq(0).width();
          var liCount = li.length;
          var leftLimit = (liWidth*liCount) - $('div#canvas').width();
          var animValue = liWidth*3;
          if(defaults.moveLeft) animValue *= -1;
          else animValue = leftLimit;
          Animate(animValue, 0, leftLimit);  
      }
  
      return this.each(function(){
          intialize(this);
      });
  }
  })(jQuery);
  </code></pre>