MouseWheel 选项仅在一个方向上滚动。（Owl-轮播）

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) 包含在页眉部分（或页脚区域，如果您的脚本包含在那里） . 没有插件就没有这样的事件，如 Owl 脚本中的“鼠标滚轮”

MouseWheel 选项仅在一个方向上滚动。（Owl-轮播）

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

javascript

html

css

owl-carousel

我的问题：

我的代码：

MouseWheel 选项仅在一个方向上滚动。 （Owl-轮播）

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

javascript

html

css

owl-carousel

我的问题：

我的代码：

MouseWheel 选项仅在一个方向上滚动。（Owl-轮播）