Автобус сова-автомат не работает должным образом при наведении курсора мыши?

Question

У меня возникла проблема с функциональностью «автоигра» совой карусели. Я загрузил и включил все необходимые файлы. Он работает правильно при нагрузке. Auto Play работает отлично. Но когда я нахожусь на каком-либо слайде, он останавливается (& Я хочу остановиться при наведении). И когда я отпустил мышь, он снова не играл. плюс, когда я переключаюсь между различными вкладками браузера и возвращаюсь к вкладке, где открывается карусель, она постоянно останавливается и в этом месте. Мне нужно перетащить его с помощью мыши или шарика мыши, а затем снова играть.

Не могу понять, в чем проблема. Я консультировался с официальным сайтом «Сова-карусель» и этими нитями, а также Thread 01, Thread 02, Thread 04. Пробовал и применял все решения, предоставляемые в этих потоках. Ничего не изменилось.

Вот мой код.

<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> 

Это мой 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> 

Вот файлы включены:

<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> 

Спасибо за помощь заранее.

Answer 1

Постарайтесь не найти решение в границах совой каруселью, мы можем создать нашу собственную функцию что-то вроде этого

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; 
} 
});