设置后更改owl carousel 2选项？

我正在寻找更具体的设置之后更改owl carousel 2选项。

我正在寻找一种方法来禁用拖动元素的父元素拖动，如下所示：

$('#carousel').on('drag.owl.carousel', function(event) { $('.carousel').on('drag.owl.carousel', function(event) { //disable drag }) }) $('#carousel').on('dragged.owl.carousel', function(event) { $('.carousel').on('dragged.owl.carousel', function(event) { //enable drag }) }) 

Answer 1

不要尝试通过挂钩到拖动事件来禁用拖动，而是使用owl.reinit()函数以及touchDrag和mouseDrag选项。 例如，如果您有旋转木马#carousel ：

 var $carousel = $('#carousel'); var owl = $carousel.data('owlCarousel'); # Your DOM element gets an 'owlCarousel' data property containing the Owl object. owl.reinit({touchDrag: false, mouseDrag: false;}); 

虽然该方法名为reinit ，但它不会reinit任何先前设置的选项。

Answer 2

以上解决方案都不适用于猫头鹰旋转木马2.2。 我想在init上更改stagePadding并调整事件大小。

我的解决方案

  var owl = $('.page-item-gal'); owl.owlCarousel({ ... onResized : setStagePaddingOC, }); function setStagePaddingOC() { var carousel = owl.data('owl.carousel'); var StgPad = ($( window ).width() - owl.parent().parent().find('.width-helper').width()) / 2; carousel.settings.stagePadding = StgPad; carousel.options.stagePadding = StgPad; owl.trigger('refresh.owl.carousel'); } setStagePaddingOC(); // onInitialized doesn't work 

Answer 3

看起来Owl 2.0的API是移动目标，因此调用可能取决于您所使用的版本。 对我而言：

 $('.carousel').trigger('changeOption.owl.carousel', { mouseDrag: false, touchDrag: false, pullDrag: false }); 

但对你而言，它可能是这样的：

 $('.carousel').trigger('change', { property: { name: 'mouseDrag', value: false } }); 

要么

 $('.carousel').trigger('change.owl.carousel', { mouseDrag: false, touchDrag: false, pullDrag: false }); 

总而言之，它可能看起来像：

 $('#carousel').on('drag.owl.carousel', function() { $('.carousel').trigger('change.owl.carousel', { mouseDrag: false, touchDrag: false, pullDrag: false }); }).on('dragged.owl.carousel', function() { $('.carousel').trigger('change.owl.carousel', { mouseDrag: true, touchDrag: true, pullDrag: true }); }); 

Answer 4

 owl.trigger('refresh.owl.carousel'); 

重新启动和更新的最佳选择

Answer 5

是的猫头鹰旋转木马版本2 ..

这对我有用（直接访问选项）

  var $carousel = $('#carousel'); var owl = $carousel.data('owlCarousel'); w = $( window ).width(); var animateStyle = 'fadeOut'; if(w <= 768){ animateStyle = false; } owl.options.animateOut = animateStyle;