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

我在owl.on内尝试了setTimeout，尝试了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);
    });
});

您可以在 Updated Fiddle 中看到它。

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

猫头鹰轮播2 事件here的列表。

修改现在适用于多个实例。

Answer 2

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

完成：）

鼠标滚轮仅在下次回调时滚动一次

2 个答案: