鼠标滚轮滚动仅触发一次下一次回调答案

【问题标题】：Mousewheel scroll fire only once next callback鼠标滚轮滚动仅触发一次下一次回调
【发布时间】：2015-06-22 08:38:55
【问题描述】：

我有这样的猫头鹰轮播设置

<div class="owl-carousel">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

这是js

var owl = $('.owl-carousel');
owl.owlCarousel({
    items       : 1,
    singleItem  : true,
    rewindNav   : false,
    dots        : true,
});
owl.on('mousewheel', '.owl-stage', function (e) {
    if (e.deltaY<0) {
        console.log(e.deltaY);
        owl.trigger('next.owl');
    } else {
        owl.trigger('prev.owl');
    }
    e.preventDefault();
});

jsFiddle 在这里：http://jsfiddle.net/f0yph3aL/

您可以看到，如果您在红色方块上滚动鼠标滚轮，幻灯片会像疯了一样移动。我只需要让 next.owl.carousel 触发一次，因此通过鼠标滚轮滚动它只会更改 +1 幻灯片。

我在owl.on 中尝试过setTimeout，尝试过debounce 和bind/unbind mousewheel。也许我做错了。感谢您的任何建议。

更新：

这是未绑定的鼠标滚轮，效果很好，但我不知道如何在超时后重新绑定鼠标滚轮(setTimeout) http://jsfiddle.net/cz122kk6/1/

【问题讨论】：

一切正常，请问您是在哪个浏览器中测试的。
Opera, Chrome, FIrefox.. 如果我用鼠标滚轮进行大滚动，它会从 0 滚动到 9.. 但如果我滚动一点，它只会滚动一张幻灯片。无论我滚动鼠标滚轮多远，我都需要触发该触发器

标签： jquery mousewheel owl-carousel owl-carousel-2

【解决方案1】：

您可以为过渡设置标志并在过渡开始/结束时更改它。这是脚本代码：

$('.owl-carousel').each(function(i) {
    var owl = $(this);
    owl.owlCarousel({
        items: 1,
        singleItem: true,
        rewindNav: false,
        dots: true,
    });
    var allowTransitionLeft = false;
    var allowTransitionRight = true;
    owl.on('mousewheel', '.owl-stage', function (e) {
        e.preventDefault();
        if (e.deltaY < 0) {
            if( allowTransitionRight ) {
                allowTransitionRight = false;
                owl.trigger('next.owl');
            };
        } else {
            if (allowTransitionLeft) {
                allowTransitionLeft = false;
                owl.trigger('prev.owl');
            };
        }
    }).on('translated.owl.carousel', function (e) {
        allowTransitionRight = (e.item.count > e.item.index );
        allowTransitionLeft = (e.item.index > 0);
    });
});

您可以在 Updated Fiddle 中看到它。

当幻灯片过渡结束时，translated.owl.carousel 事件被触发。在那里，我们根据 Carousel 的活动项目索引选择允许的转换。

Owl Carousel 2 活动列表here。

编辑： 现在适用于多个实例。

【讨论】：

多个 owl 实例有问题，请检查更新的小提琴jsfiddle.net/f0yph3aL/8 ，正如您看到的，当您结束第 9 张幻灯片并转到另一个部分时，未触发鼠标滚动。跨度>

【解决方案2】：

owl.owlCarousel({
    items       : 1,
    singleItem  : true,
    rewindNav   : false,
    dots        : true,
    loop: true,
    smartSpeed: 1000,
});

完成:)

【讨论】：

不：（如果我从上到下滚动鼠标滚轮，它会触发两次，所以不，减慢滑动速度不是解决方案。我知道诀窍在于 deltaY（鼠标滚轮）。