title: How to stop the animation on mouse hover?
body: <p>I have a slider in my page, and I would like to make the animation to stop on mouse hover, and then to resume when the mouse is not there anymore.</p>
  
  <p>I tried something with the <code>.stop</code> command but I didn't manage to make it work.
  Can someone, please, help me?</p>
  
  <pre><code>var $item = $('.carousel .item'); 
  var $wHeight = $(window).height();
  $item.eq(0).addClass('active');
  $item.height($wHeight); 
  $item.addClass('full-screen');
  
  $('.carousel img').each(function() {
    var $src = $(this).attr('src');
    var $color = $(this).attr('data-color');
    $(this).parent().css({
      'background-image' : 'url(' + $src + ')',
      'background-color' : $color
    });
    $(this).remove();
  });
  
  $(window).on('resize', function (){
    $wHeight = $(window).height();
    $item.height($wHeight);
  });
  
  $('.carousel').carousel({
    interval: 2000,
    pause: "false"
  });
  $(this).stop(true);
  </code></pre>