OwlCarousel stopOnHover功能

Question

我需要你的幫助多一次與貓頭鷹旋轉木馬最古老的一個版本。目前我需要設置stopOnHover功能。當您將鼠標懸停在停止的滑動條上時，原始選項顯得非常重要。我在滑塊中有一個按鈕，並且需要修改該功能以在懸停在按鈕上時停止滑塊。

這是我的配置。

$(document).ready(function() { 
     $(".owl-carousel").owlCarousel({ 
     loop:false, 
     navigation : true, 
     pagination : true, 
     paginationSpeed : 1000, 
     singleItem: true, 
     transitionStyle: "mask", 
     autoHeight: true, 
     autoPlay: 6000, //Set AutoPlay to 3 seconds 
     navigationText : false, 
     stopOnHover: true, 
     afterAction: syncPosition, 
     afterInit: function(){ 
     $("#sequence-1").find('video').get(0).play(); 
} 

     }); 


    function syncPosition(el){ 
    var current = this.currentItem;  
    // code for smooth transition 
    this.owl.owlItems.removeClass('turn-on'); 
    var t = this;  

    $(this.owl.owlItems[this.owl.currentItem]).addClass('turn-on'); 
    } 


    }); 


    $(window).scroll(function(){ 
     if ($(this).scrollTop() > 80) { 
      $('.owl-pagination').addClass('hidden'); 
     } else { 
      $('.owl-pagination').removeClass('hidden'); 
     } 
}); 

感謝您的幫助

編輯： 我發現一個函數（方法）owl.stop()對作者的網站。 嘗試使用鼠標懸停但不起作用。

$(".slider_button").on("mouseover", function(){ 
    owl.stop() 
    }); 

Answer 1

輪盤選擇：

autoplay: true, 
autoplayTimeout: 500, 
autoplayHoverPause: true 

$(window).load(function() { 
 
    $('.owl-carousel').owlCarousel({ 
 
    autoWidth: true, 
 
    center: true, 
 
    items: 3, 
 
    loop: true, 
 
    margin: 10, 
 
    autoplay: true, 
 
    autoplayTimeout: 500, 
 
    autoplayHoverPause: true 
 
    }); 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="//cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/owl.carousel.js"></script> 
 
<link href="//cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.theme.default.css" rel="stylesheet"/> 
 
<link href="//cdn.rawgit.com/smashingboxes/OwlCarousel2/2.0.0-beta.3/dist/assets/owl.carousel.css" rel="stylesheet"/> 
 

 
<div class="owl-carousel owl-theme"> 
 
    <div class="item"> 
 
    <img src="http://placehold.it/350x150&text=1" /> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://placehold.it/350x150&text=2" /> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://placehold.it/350x150&text=3" /> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://placehold.it/350x150&text=4" /> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://placehold.it/350x150&text=5" /> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://placehold.it/350x150&text=6" /> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://placehold.it/350x150&text=7" /> 
 
    </div> 
 
    <div class="item"> 
 
    <img src="http://placehold.it/350x150&text=8" /> 
 
    </div> 
 
</div>