フックカルーセル自動再生がマウスオーバーで正しく機能していませんか？

Question

私はフクロウカルーセルの「自動再生」機能に問題があります。私はアップロードし、必要なすべてのファイルを含んでいます。その負荷で適切に動作しています。自動再生は完全に機能します。しかし、スライドのどれかにカーソルを合わせると停止します（&私はホバーを止めたい）。そして私がマウスを放すと、それは再び遊ぶことはなかった。また、ブラウザの別のタブを切り替えて、カルーセルが開いているタブに戻ってくると、その時点で永久に停止します。私はマウスのクリックやマウスのボールでそれをドラッグする必要がありますそれは再び再生されます。

問題を特定できません。私は公式の "Owl carousel"ウェブサイトとこれらのスレッドを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; 
} 
});