Mi problema :

Hola, estoy tratando de construir un carrusel con Owl-Carousel 2.3.4 y quiero poder desplazarme por mis imágenes con la opción de la rueda del mouse.

Mi código :

Código HTML :

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

Código Javascript/jQuery:

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

Gracias por tu ayuda :/