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

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

• javascript
• jquery
• html
• css
• owl-carousel

6 Answers 6

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

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');

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
  });
});

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.

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

best option to reinit & update

yes owl carousel version 2 ..

this works for me ( acces options directly )

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

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