[英]Owl Carousel 2 - can't change slide on hover
I already tried to swap the functions on owl.carousel.js but it only works when the mouse moves. 我已经尝试过交换owl.carousel.js上的功能,但是它仅在鼠标移动时才起作用。
var Autoplay = function(scope) {
this.core = scope;
this.core.options = $.extend({}, Autoplay.Defaults, this.core.options);
this.handlers = {
'translated.owl.carousel refreshed.owl.carousel': $.proxy(function() {
this.autoplay();
}, this),
'play.owl.autoplay': $.proxy(function(e, t, s) {
this.play(t, s);
}, this),
'stop.owl.autoplay': $.proxy(function() {
this.stop();
}, this),
'mouseover.owl.autoplay': $.proxy(function() {
if (this.core.settings.autoplayHoverPause) {
this.pause();
}
}, this),
'mouseleave.owl.autoplay': $.proxy(function() {
if (this.core.settings.autoplayHoverPause) {
this.autoplay();
}
}, this)
};
this.core.$element.on(this.handlers);};
Any idea how to make the slideshow work when mouse on top of the image? 知道如何在将鼠标放在图像上方时使幻灯片放映吗?
When i had this problem, i used this code: 当我遇到这个问题时,我使用了以下代码:
$('.owl-carousel .owl-dot').hover(function() { $('。owl-carousel .owl-dot')。hover(function(){
$(this).click(); $(this).click();
}, },
function() {} function(){}
); );
and here my css for dots: 这是我的CSS的点:
.owl-dot{ .owl-dot {
position: relative; 职位:相对
padding: 0; 填充:0;
height: 3px; 高度:3px;
margin: 0; 边距:0;
float: left; 向左飘浮;
} }
.owl-dot:before{ .owl-dot:before {
content: ""; 内容:“”;
position: absolute; 位置:绝对;
top: -168px; 顶部:-168px;
// the height of image height: 168px; //图片高度:168px;
// the height of image width: 100%; //图片高度的宽度:100%;
left: 0; 左:0;
z-index: 0; z索引:0;
} }
when you will make hover to dots the image will be changing, that's all !!! 当您将鼠标悬停在点上时,图像将发生变化,仅此而已!!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.