change owl carousel 2 options after setup?

Question

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').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
    })
})

Solution 1

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 2

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 3

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 4

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 5

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

best option to reinit & update

View more solutions

Comments

[gauvain robert]

ok but how do you reinit in the seond version of the carousel

[Alex P]

If you have two carousels, then they'll be in separate DOM elements. Each one will have its own owl object that you can access via .data('owlCarousel'). You can call reinit() on both, and it will only affect that particular carousel. You can also call reinit() multiple times on the same one, if you want to toggle dragging on and off.

[Andy]

@AlexP I think he was referring to version 2 of the plugin rather than 2 carousels. There doesn't seem to be a reinit method in v2

[Peyman Mohamadpour]

@Andy is absolutely right. this is not an answer to the question, as It clearly addresses the first version, not the second. All software improve as the version number increases, this one seems to go in opposite direction!

[RickL]

The link to owlCarousel documentation in the post leads to spam page and should be changed/removed (as at 11 Oct 2017)

[Daniel Iser]

Confirming this is the only method that works with the latest v2.3.4.

[Daniel Iser]

Confirming this is the only method that works with the latest v2.3.4.