The MouseWheel option scrolls in only one direction. (Owl-Carousel)

My Problem :

Hello, I am trying to build a carousel with Owl-Carousel 2.3.4 and I want to be able to scroll through my pictures with the mousewheel option.

My Code :

HTML code :

<div style="margin:50px; background-color:rgb(13, 62, 197)">
        <div class="owl-carousel owl-theme owl-loaded">
            <div class="owl-stage-outer">
                <div class="owl-stage">
                    <div class="owl-item"><img src="http://choualbox.com/Img/1610201164347.jpg"/></div>
                    <div class="owl-item"><img src="https://i.redd.it/g6xvf5f0qgg11.jpg"/></div>
                    <div class="owl-item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFS3efRZlTt9PJizEsfdqWkKXRMiRxdZpPCRW9lu2lmrGNsrK4hn0Lv_EY3tvgdEzkAcU&usqp=CAU"/></div>
                    <div class="owl-item"><img src="https://p4.wallpaperbetter.com/wallpaper/668/767/691/magenta-by-kvacm-wallpaper-preview.jpg"/></div>
                    <div class="owl-item"><img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2780767c-1e4e-4a64-af2b-1f5fa8e7b082/dealyyt-3a2ec6a7-150a-48cf-8d04-2994c80b5292.jpg/v1/fill/w_1280,h_720,q_75,strp/synthian_by_kvacm_dealyyt-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzIwIiwicGF0aCI6IlwvZlwvMjc4MDc2N2MtMWU0ZS00YTY0LWFmMmItMWY1ZmE4ZTdiMDgyXC9kZWFseXl0LTNhMmVjNmE3LTE1MGEtNDhjZi04ZDA0LTI5OTRjODBiNTI5Mi5qcGciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.RQU_Dinbok5DTRb9vftlrhOfwkKvRn207FGC40P4myE"/></div>
                </div>
            </div>
         </div>
     </div>

Javascript/jQuery code :

let owl = $('.owl-carousel');
$(document).ready(function(){
    owl.owlCarousel({
        center:true,
        margin:25,
        navText: [" ", " "],
        loop:true
    })
    owl.on('mousewheel', '.owl-stage', function (e) {
        if (e.deltaY>0) {
            owl.trigger('prev.owl');
        } else {
            owl.trigger('next.owl');
        }
        e.preventDefault();
    });
});

Thank you for your help :/

Solution

You must include this jQuery plugin (https://github.com/jquery/jquery-mousewheel) in the head section (or footer area if your scripts included there) after included owl-carousel.js files. Without plugin there no such event, as "mousewheel" in the Owl scripts