title: How to stop Owl Carousel when clicking navigation arrows
body: <p>I have a simple Owl carousel with autoplay set and navigation arrows, defined with the options below:</p>
  
  <pre><code> var options = {
      mainBanner: {
          animateOut: 'fadeOut',
          autoplay: true,
          autoplayHoverPause: false,
          autoplaySpeed: 1200,
          dots: false,
          lazyLoad: true,
          loop: true,
          mouseDrag: false,
          pullDrag: false,
          touchDrag: false,
          nav: true,
          navText: [
              "&amp;lsaquo;",
              "&amp;rsaquo;"
          ]
      },
  </code></pre>
  
  <p>...</p>
  
  <p>When the user clicks the navigation arrow, I want it to stop autoplay. In order to do this, I added the following function:</p>
  
  <pre><code>setTimeout(function () {    
      $('.owl-nav &gt; div').on('click', function () {
          $('.owl-carousel').trigger('stop.owl.autoplay');            
      })
  }, 500);
  </code></pre>
  
  <p>(I added the timeout because the .owl-nav elements are not rendered yet when this function is loaded. It's not quite elegant, but it serves the purpose).</p>
  
  <p>The problem is that when I click the navigation arrows, the autoplay stops. BUT, if I click them again (and again, and again), the slider keeps autoplaying. This is not the expected behaviour - I would simply like it to stop from the first click.</p>
  
  <p>Any hints on how to solve this are very much appreciated. Thank you! </p>