title: Getting JQuery slider to stop on mouse hover
body: <p>I have <a href="http://townappliance.arosavd.com/" rel="nofollow">a web site</a> with a jQuery slider that automatically slides when the page is loaded. How can I get the slider to stop when the mouse hovers over it?</p>
  
  <p>I'm using the following jQuery code:</p>
  
  <pre><code>  var my_jQuery = jQuery.noConflict(true);
  
    window.onload = function () {
  
          // added  by pesach
  
          var totalWidth=0;
          var numItems=0;
          my_jQuery('li', 'div#scroll_Bar').each (function() {
  
          totalWidth = totalWidth + my_jQuery(this).outerWidth() + 1;
          numItems = numItems + 1;
  
          });
          //alert(totalWidth * -1);
  
          my_jQuery('ul', 'div#scroll_Bar').width(totalWidth);
          var slidewidth = totalWidth - 960;
          //end of addition
  
  
          var container = $('div#scroll_Bar');
          var ul = $('ul', container);
  
          var itemsWidth = ul.innerWidth() - container.outerWidth();
  
          //$("div.sliderGallery ul li").hover(stop(true, true), stop(true, true));
          my_jQuery('ul', 'div#scroll_Bar').animate({'left' : slidewidth * -1}, numItems * 1000, 'linear');
          my_jQuery('ul', 'div#scroll_Bar').animate({'left' : 0}, numItems * 800, 'linear');
  
  
          my_jQuery('.slider', container).slider({
              min: 0,
              max: itemsWidth,
              handle: '.handle',
              stop: function (event, ui) {
                  ul.animate({'left' : ui.value * -1}, 500),my_jQuery('ul', 'div#scroll_Bar').stop(true, true);
              },
              slide: function (event, ui) {
                  ul.css('left', ui.value * -1),my_jQuery('ul', 'div#scroll_Bar').stop(true, true);
              }
          });
  
      };
  </code></pre>