Owl carousel Auto Play not working properly on mouseover?

Question

I am getting problem with owl carousel 'auto play' functionality. I have uploaded and included all the needed files. Its is working properly on load. Auto Play works perfectly. But when I hover on any of the slide it stops(& I want to stop on hover). And when I release the mouse it didn't play again. plus when I switch between different tabs of the browser and come back to the tab where the carousel is open it permanently stops at that point too. I need to drag it with mouse click or mouse ball then it play again.

Can't figure out whats the problem. I have consulted the official "Owl carousel" website and these threads as well Thread 01, Thread 02, Thread 04. Tried and applied all the solutions provided in these threads. Nothing changed.

Here is my code.

<section id="demos">
  <div class="row">
    <div class="large-12 columns">
      <div class="owl-carousel owl-theme">
        <div class="item">             
          <img src="carousel-03.png" alt="Owl Image">
          <h2>Logo Design</h2>
          <p>Our logo designs are unique enough to get you the trademark and compelling enough to help you get clients. Get a logo done by us and see for yourself.</p>
        </div>
        <div class="item">              
          <img src="carousel-05.png" alt="Owl Image">
          <h2>Stationery Design</h2>
          <p>We design business cards and stationery which Convey the professionalism and seriousness of your business to your customers.</p>
        </div>
        <div class="item">
          <img src="carousel-02.png" alt="Owl Image">
          <h2>Flyers &amp; Brochures</h2>
          <p>We design brochures which depict your services in an impressive way to both current and potential clientele.</p>
        </div>
        <div class="item">
          <img src="carousel-01.png" alt="Owl Image">
          <h2>Apps Design</h2>
          <p>We design Apps which depict your services in an impressive way to both current and potential clientele.</p>
        </div>
        <div class="item">              
          <img src="carousel-04.png" alt="Owl Image">
          <h2>Labels and Packaging</h2>
          <p>We design Labels and Packaging which depict your services in an impressive way to both current and potential clientele.</p>
        </div>
      </div>
    </div>
  </div>
</section>

This is my Js

<script>
   $(document).ready(function() {
      var owl = $('.owl-carousel');
      owl.owlCarousel({
         loop: true,
         nav: false,
         navSpeed: 2000,
         slideSpeed : 2000,
         dots: false,
         dotsSpeed: 2000,
         lazyLoad: false,
         autoplay: true,
         autoplayHoverPause: true,
         autoplayTimeout: 5000,
         autoplaySpeed:  800,
         margin: 0,
         stagePadding: 0,
         freeDrag: false,
         mouseDrag: true,
         touchDrag: true,
         slideBy: 1,
         fallbackEasing: "linear",
         responsiveClass: true,
         navText: [ "previous", "next" ],
         responsive: {
            0: {
               items: 1,
               nav: false
            },
            600: {
               items: 2,
               nav: false
            },
            1000: {
               items: 3,
               nav: false,
               margin: 20
            }
          }
       });
       owl.on('mousewheel', '.owl-stage', function (e) {
         if (e.deltaY>0) {
            owl.trigger('next.owl');
         } else {
            owl.trigger('prev.owl');
         }
         e.preventDefault();
      });
   })
</script>

Here are the files included:

<link rel="stylesheet" href="css/owl.carousel.min.css">

<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.min.js"></script>

<script src="js/owl.autoplay.js"></script>
<script src="js/owl.autorefresh.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>

<script src="js/highlight.js"></script>
<script src="js/app.js"></script>

Thanks for the help in advance.

Answer 1

Try not to find a solution within the boundaries of owl carousel we can create our own function something like that

var block = false;
$(".owl-item").mouseenter(function(){
 if(!block) {
  block = true;
  owl.trigger('stop.owl.autoplay')
  block = false;
  }
});
$(".owl-item").mouseleave(function(){
 if(!block) {
  block = true;
  owl.trigger('play.owl.autoplay',[1000])
  block = false;
 }
});