title: Pause Carousel on hover of separate elements (Owl Beta 2)
body: <p>I've created a separate navigation which sits completely outside of the carousel but I'm having a few issues with the autoplay.</p>
  
  <p>Here is the markup:</p>
  
  <pre><code>&lt;div class="carousel"&gt;
      &lt;div class=""&gt;
          &lt;img src="assets/img/carousel1.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class=""&gt;
          &lt;img src="assets/img/carousel2.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class=""&gt;
          &lt;img src="assets/img/carousel3.jpg" /&gt;
      &lt;/div&gt;
      &lt;div class=""&gt;
          &lt;img src="assets/img/carousel4.jpg" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="carousel_selector"&gt;
      &lt;a href="" data-to="0"&gt;0&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="carousel__selector"&gt;
      &lt;a href="" data-t="1"&gt;1&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="carousel_selector"&gt;
      &lt;a href="" data-to="2"&gt;3&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="carousel_selector"&gt;
      &lt;a href="" data-to="3"&gt;4&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and here is the Javascript:</p>
  
  <pre><code>var carousel = $(".carousel");
  
  carousel.owlCarousel({
      autoplay: true,
      autoplayHoverPause: true,
      autoplayTimeout: 500,
      items: 1,
      loop: true
  });
  
  $('.carousel_selector a').on('mouseover', function (e){
      carousel.trigger('stop.owl.autoplay');
  });
  
  $('.carousel_selector a').on('mouseleave', function (e){
      carousel.trigger('play.owl.autoplay');
  });
  
  $('.carousel_selector a').on('click', function (e){
      e.preventDefault();
      var slideTo = $(this).data('to');
      carousel.trigger('to.owl.carousel', [slideTo]);
      carousel.trigger('stop.owl.autoplay');
  });
  </code></pre>
  
  <p>The <code>.on('mouseover', ...</code> and <code>.on('mouseleave', ...</code> are called as expected, but the carousel only pauses sometimes. I can't see any pattern to when it pauses.</p>
  
  <p>The <code>.on('click', ...</code> works absolutely fine, except when the autoplay is paused, it resumes immediately. I've tried adding a call to stop the autoplay immediately after the navigation but it hasn't made a difference.</p>
  
  <p>My questions are:</p>
  
  <p>1) How can I consistently pause the carousel when the mouse is over certain elements?</p>
  
  <p>2) Can the carousel autoplay remain paused (provided the mouse is over certain elements) even after triggering <code>to.owl.carousel</code>?</p>