我需要你的帮助,猫头鹰旋转木马是最老的一个版本。目前我需要设置一个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()
});
答案 0 :(得分:0)
在轮播选项中:
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>