OwlCarousel stopOnHover函数
OwlCarousel stopOnHover函数
提问于 2016-06-09 00:46:54
我需要你再一次帮助猫头鹰旋转木马最老的一个版本。目前，我需要设置一个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()
});回答 1
Stack Overflow用户
发布于 2016-06-10 17:30:29
在旋转木马选项中：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37708391
复制相关文章
相似问题
腾讯云开发者
