如何让我的猫头鹰旋转木马方向跟随鼠标滚轮方向

Posted 2023-05-07

【中文标题】如何让我的猫头鹰旋转木马方向跟随鼠标滚轮方向

【英文标题】：How can I make my owl carousel direction follow the mouse wheel direction

【发布时间】：2018-09-19 22:22:37

【问题描述】：

当我滚动鼠标滚轮时它会移动，但是当我改变滚动方向时它不会改变它的方向。 如何使我的猫头鹰旋转木马方向跟随鼠标滚轮方向？ 当我滚动鼠标滚轮时它会移动，但是当我改变滚动方向时它不会改变它的方向。 ？

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" >
                </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" >
                </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" >
                </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" >
                </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" >
                </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" >
                </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" >
                </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>

【参考方案1】：

我遇到了同样的问题。

在 Chrome 开发者工具 (F12) 中，使用日志检查滚轮事件：

console.log(e);

这将告诉您e.deltaY 不存在于事件对象中。但是，e.originalEvent 属性确实存在，并且e.originalEvent.deltaY 存在于此处。

因此，将回调更改为：

    ...
    if (e.originalEvent.deltaY > 0) 
    ...

滚动条现在应该可以在两个方向上正常工作了。

[编辑] 我考虑让它在 IE(11) 中工作。 IE11 显示了 Chrome 对象中不存在的滚轮事件对象属性e.originalEvent.wheelDelta，这可以与deltaY 一样使用。

在这种情况下，我们可以使用

    ...
    if (e.originalEvent.wheelDelta> 0) 
    ...

它应该可以在 Chrome 和 IE11 上运行。

为了在 Firefox 中也能正常工作，需要一个不同的回调事件 AND 属性：

回调是DOMMouseScroll，要测试的属性是e.originalEvent.detail，如下：

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。

【参考方案2】：

我有同样的问题。 要解决此问题，只需替换：

if (e.deltaY > 0) 

与：

if (e.originalEvent.deltaY>0)