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

Question

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

<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 幻灯片。

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

更新：

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

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

您可以在更新的 Fiddle中看到它。

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

Owl Carousel 2活动列表在这里。

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

Answer 2

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

完毕 ：）