MouseWheel选项只能在一个方向上滚动.(Owl-Carousel)

Question

我的问题:

你好，我正试图用Owl-Carousel 2.3.4建立一个旋转木马，我希望能够通过鼠标滚轮选项滚动我的图片。

---

我的代码:

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>

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

---

谢谢你的帮助:/

Answer 1

您必须在包含的owl-carousel.js文件之后的头部部分(或脚注区域，如果您的脚本包含在那里)包含这个jQuery插件(https://github.com/jquery/jquery-mousewheel)。没有插件就没有这样的事件，如"mousewheel"在Owl脚本中