鼠标滚轮滚动火只有一次下一个回调

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。也许我做错了。感谢您的任何建议。

UPDATE：

这里是unbinded鼠标滚轮，它的伟大工程，但我不知道豪一些超时(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, 
}); 

完成:)

后重新绑定鼠标滚轮