Eulenkarussell Auto Play funktioniert nicht richtig?

Question

Ich bekomme Probleme mit Eulenkarussell "Auto Play" -Funktionalität. Ich habe alle benötigten Dateien hochgeladen und aufgenommen. Es funktioniert ordnungsgemäß unter Last. Auto Play funktioniert perfekt. Aber wenn ich auf irgendeine Folie schwebe, stoppt sie (& Ich möchte beim Hover anhalten). Und wenn ich die Maus loslasse, wird sie nicht mehr abgespielt. Plus, wenn ich zwischen verschiedenen Registerkarten des Browsers wechsle und zu der Registerkarte zurückkomme, auf der das Karussell geöffnet ist, hält es auch an dieser Stelle permanent an. Ich muss es mit einem Mausklick oder Mausball ziehen, dann spielt es wieder.

Kann nicht herausfinden, was das Problem ist. Ich habe die offizielle "Owl Carousel" Website und diese Themen sowie Thread 01, Thread 02, Thread 04 konsultiert. Alle in diesen Threads bereitgestellten Lösungen wurden getestet und angewendet. Nichts hat sich geändert.

Hier ist mein 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> 

Das ist mein 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> 

Hier sind die Dateien enthalten:

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

Danke für die Hilfe im Voraus.

Answer 1

Als Standard kann nicht als Option zur Verfügung gestellt werden, so dass Sie Ihre eigene Funktion

deklariert eine Variable zu Beginn

var block = false; 

Jetzt für die Maus über functon wir zuerst machen müssen gehen

$(".owl-item").mouseenter(function(){ 
if(!block) { 
    block = true; 
    owl.trigger('stop.owl.autoplay') 
    block = false; 
    } 
}); 

nun die gleiche oben Variable werden wir Maus verlassen Funktion

012 machen

Hoffe es ist die Antwort auf Ihre Frage!