如何使我的猫头鹰旋转木马方向跟随鼠标滚轮方向 [英] How can I make my owl carousel direction follow the mouse wheel direction
问题描述
当我滚动鼠标滚轮时，它会移动，但是当我改变滚动方向时，它不会改变其方向. 如何使猫头鹰旋转木马的方向跟随鼠标滚轮的方向? 当我滚动鼠标滚轮时，它会移动，但是当我更改滚动方向时，它不会更改其方向. 如何使我的猫头鹰旋转木马方向跟随鼠标滚轮方向?
When i scroll mouse wheel it moves but when i change scrolling direction it does not change its direction. How can i make my owl carousel direction follow the mouse wheel direction ? When i scroll mouse wheel it moves but when i change scrolling direction it does not change its direction. How can i make my owl carousel direction follow the mouse wheel direction ?
var owl = $('.owl-carousel');
owl.owlCarousel({
loop: true,
margin: 10,
padding: 10,
responsiveClass: true,
rtl: false,
stagePadding: 100,
smartSpeed: 550,
autoplay: true,
autoplayTimeout: 1000,
autoplayHoverPause: true,
nav: true,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: true
},
1000: {
items: 5,
nav: true,
}
}
})
owl.on('mousewheel', '.owl-stage', function (e) {
if (e.deltaY > 0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
html{
width: 100vw;
background: linear-gradient(0deg,#aaaaaa,#f0f0f0) no-repeat;
}
.demo-container{
margin-top: 5em;
background: linear-gradient(0deg,#aaaaaa,#f0f0f0);
}
.owl-carousel .owl-stage-outer{
overflow: visible;
}
.sb-carousel-wrap {
position: relative;
margin-left: -15px;
margin-right: -15px;
z-index: 1;
}
.sb-carousel-wrap .brand-carousel-gradient {
position: absolute;
top: 0;
width: 105px;
height: 100%;
z-index: 10;
}
.brand-carousel-gradient.left {
left: 0;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.brand-carousel-gradient.right {
right: 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.sb-car-img{
overflow: hidden;
}
.sb-car-img:hover img{
transform: scale(1.2);
}
.sb-itm-img {
transition: all 0.6s ease-in 0s;
-webkit-transition: all 0.6s ease-in 0s;
-ms-transition: all 0.6s ease-in 0s;
}
.my-slider{
float: left:
width:100%;
padding: 0 15px;
overflow: hidden;
}
<div class="my-slider">
<div class="sb-carousel-wrap">
<div class="brand-carousel-gradient left"></div>
<div class="brand-carousel-gradient right"></div>
<div class="demo-container">
<div class="owl-carousel owl-theme">
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
<div class="item">
<div class="sb-car-img">
<img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
推荐答案
我遇到了同样的问题.
在Chrome开发人员工具(F12)中，通过日志检查转轮事件:
In Chrome developer tools (F12), inspect the wheel event with a log:
console.log(e);
这将向您显示事件对象中不存在e.deltaY.但是，属性e.originalEvent确实存在，并且e.originalEvent.deltaY在此处存在.
This will show you that e.deltaY does not exist in the event object. However, the property e.originalEvent does, and e.originalEvent.deltaY exists here.
因此，将回调更改为此:
Therefore, change the callback to this:
...
if (e.originalEvent.deltaY > 0) {
...
滚动条现在应该在两个方向上都能正常工作.
The scroll should work correctly in both directions now.
[edit]我调查了它在IE(11)中的运行. IE11显示了Wheel事件对象属性e.originalEvent.wheelDelta，该属性在Chrome对象中不存在，可以与deltaY相同的方式使用.
[edit] I looked into getting it working in IE(11). IE11 shows the wheel event object property e.originalEvent.wheelDelta which is not present in the Chrome object, and this can be used in the same way as deltaY.
在这种情况下，我们可以使用
In this case, we can use
...
if (e.originalEvent.wheelDelta> 0) {
...
，它应该在Chrome和IE11上均可使用.
and it should work on both Chrome and IE11.
要在Firefox中也可以使用此功能，则需要一个不同的回调事件AND属性:
To get this working in Firefox as well, a different callback event AND property is needed:
回调为DOMMouseScroll，要测试的属性为e.originalEvent.detail，如下所示:
Callback is DOMMouseScroll and property to test is e.originalEvent.detail, as follows:
owl.on('DOMMouseScroll','.owl-stage',function(e){
if (e.originalEvent.detail > 0){
owl.trigger('next.owl');
}
else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
作为旁注，我看了看Owl演示，并且确实按照文档中的描述使用e.deltaY运行.
As a side note, I looked at the Owl demo, and this does indeed run as described in the documentation, using e.deltaY.
这篇关于如何使我的猫头鹰旋转木马方向跟随鼠标滚轮方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
