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

Question

我有这样的 Owl 轮播设置

<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、debounce 和 bind/unbind mousewheel 中尝试过 setTimeout。也许我做错了。感谢您的任何建议。

更新：

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

Answer 1

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

完成:)

Answer 2

您可以设置转换标志并在时间转换中更改它starts/ends。这是脚本代码：

$('.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 轮播 2 事件 here.

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

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

Mousewheel scroll fire only once next callback

jquery

mousewheel

owl-carousel

owl-carousel-2