3

我正在寻找更具体的设置后更改 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
    })
})
4

6 回答 6

6

以上解决方案都不适用于 owl carousel 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
于 2017-02-17T15:06:17.193 回答
4

上面的答案对我不起作用，但这确实：

var $carousel = jQuery('#owl-carousel-block');
var carouselData = $carousel.data();
var carouselOptions = carouselData['owl.carousel'].options;
    carouselOptions.loop = true;
$carousel.trigger('refresh.owl.carousel');
于 2018-11-16T16:32:33.563 回答
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
  });
});
于 2016-03-02T15:36:54.317 回答
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，但它不会清空您之前设置的任何选项。

于 2014-08-16T11:03:13.390 回答
1 
owl.trigger('refresh.owl.carousel');

重新初始化和更新的最佳选择

于 2018-09-07T09:46:37.707 回答
0

是的猫头鹰轮播第2版..

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

    var $carousel = $('#carousel');
    var owl = $carousel.data('owlCarousel');  

    w = $( window ).width();
    var animateStyle = 'fadeOut';
    if(w <= 768){
        animateStyle = false;
    } 
    owl.options.animateOut = animateStyle;
于 2014-10-07T08:24:09.403 回答