Change Owl Carousel 2 Options After Setup?

I'm searching for change owl carousel 2 options after setup more specifically. I am searching a way to disable drag of parent element of the drag element like this: $('#carousel').

Solution 1:

None of solutions above work for me on owl carousel 2.2. I wanted to change stagePadding on init and resize event.

My solution :

    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

Solution 2:

The answers above didnt work for me but this did:

var $carousel = jQuery('#owl-carousel-block');
var carouselData = $carousel.data();
var carouselOptions = carouselData['owl.carousel'].options;
    carouselOptions.loop = true;
$carousel.trigger('refresh.owl.carousel');

Solution 3:

It looks like the API of Owl 2.0 is a moving target, so the call may depend on what version you're on. For me it's:

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

But for you it may be something like:

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

Or

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

So all together it may look like:

$('#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
  });
});

Solution 4:

Rather than try to disable the drag via hooking into the drag events, it would be better to use the owl.reinit() function, along with the touchDrag and mouseDrag options. For instance, if you had a carousel #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;});

Although the method is named reinit, it won't blank any of your previously-set options.

Solution 5:

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

best option to reinit & update