title: Image Slider Non working right
body: <p>the code below dose not work right. I want an image slider that changes every 5 seconds, but if I hover over it it will stop and when i leave it starts again. When you click on it it will change. I can make it change every 5 seconds, and change it when i click, but i cant get it to stop when I hover.</p>
  
  <pre><code>$('document').ready(function() {
  
      var img = 0;
      var pic = ['nature', 'grass', 'earth', 'fall', 'fall2'];
      var slider = 'img.slide_img'; // html image
  
      function slide() {
          $(slider).attr('src', 'pictures/' + pic[img] + '.jpg');
          img++;
          if (img &gt;= pic.length) {
              img = 0;
          }
      }
  
      $(slider).on('mouseleave', function() {
          auto(3000);
      });
  
      $(slider).on('click', function() {
          slide();
      });
  
      function auto(time) {
          setInterval(function() {
              slide();
          }, time)
      }   
  });
  </code></pre>