javascript - MouseWheel 选项只向一个方向滚动。(猫头鹰旋转木马)
问题描述
我的问题 :
您好,我正在尝试使用 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();
});
});
谢谢您的帮助 :/
解决方案
在包含 owl-carousel.js 文件之后,您必须在头部部分(或者如果您的脚本包含在页脚区域)中包含这个 jQuery 插件(https://github.com/jquery/jquery-mousewheel )。没有插件就没有这样的事件,如猫头鹰脚本中的“鼠标滚轮”
推荐阅读
- python - 无需在 Python 中复制数据的多处理
- python - 如何有效地在 pandas DataFrame 中生成 AR(1) 进程
- reactjs - 让状态成为对象而不是字符串被认为是最佳实践吗?
- c++ - 保持 shared_ptr use_count() 为 1
- reactjs - 'useEffect',缺少返回类型注释,隐含有一个'any'返回类型.ts(7010)
- java - 当通过 and 限制索引范围时,Hotspot 可以消除边界检查吗?
- jenkins - 使用 ${currentBuild.number} 在 jenkins 中发送松弛消息
- javascript - 如何防止 CTRL 和滚轮 / 触控板在 Flutter Web 中缩放?
- python - 通过升序键和降序值对计算单词出现次数的 Python 字典进行排序
- r - 使用 R 中的列表替换值