title: How can I make this jQuery slider automatic
body: <p>I am going to be totally honest and tell you that I got this slider from a download somewhere, my knowledge of Javascript is very small.</p>
  
  <p>I am trying to get the slider to automatically go to the next image or piece of content every 4 or 5 seconds, and I'd like to make it stop when the mouse hovers onto the piece of content.</p>
  
  <p>here is my code</p>
  
  <pre><code>    $(document).ready(function(){ 
  
      if(jQuery("#slider").length){
          var totalImages = jQuery("#slider &gt; li").length, 
              imageWidth = jQuery("#slider &gt; li:first").outerWidth(true),
              totalWidth = imageWidth * totalImages,
              visibleImages = Math.round(jQuery("#slider-wrap").width() / imageWidth),
              visibleWidth = visibleImages * imageWidth,
              stopPosition = (visibleWidth - totalWidth);
  
          jQuery("#slider").width(totalWidth);
  
          jQuery("#gallery-prev").click(function(){
              if(jQuery("#slider").position().left &lt; 0 &amp;&amp; !jQuery("#slider").is(":animated")){
                  jQuery("#slider").animate({left : "+=" + imageWidth + "px"});
              }
              return false;
          });
  
          jQuery("#gallery-next").click(function(){
              if(jQuery("#slider").position().left &gt; stopPosition &amp;&amp; !jQuery("#slider").is(":animated")){
                  jQuery("#slider").animate({left : "-=" + imageWidth + "px"});
              }
              return false;
          });
      }
  
  });
  </code></pre>