title: Bootstrap Carousel cycle on mouseenter and pause on mouseleave + interval
body: <p>I would like to have the Bootstrap Carousel only cycle <code>on:hover</code> and pause once the mouse leaves. I'm using default Bootstrap code base. There will be multiple carousels on the page with this functionality. </p>
  
  <p>I would also like to control the interval speed if possible. The data-interval attribute seems to not be working. </p>
  
  <p>This piece of code almost works, but only the first time when the mouse hovers over the carousel. It does not work the second time and does not control the interval. </p>
  
  <pre><code>&lt;script&gt;
    $(document).ready(function(){
      $('.carousel').mouseenter(function() {
          $(this).carousel('cycle');
      }).mouseleave(function() {
          $(this).carousel('pause');
      });
    });
  &lt;/script&gt;
  </code></pre>