How can I make my owl carousel direction follow th

Question

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>

Answer 1

I had the same issue.

In Chrome developer tools (F12), inspect the wheel event with a log:

console.log(e);

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] 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) {
    ...

and it should work on both Chrome and IE11.

To get this working in Firefox as well, a different callback event AND property is needed:

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();
}); 

As a side note, I looked at the Owl demo, and this does indeed run as described in the documentation, using e.deltaY.