Ndtyjky

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

    })

})

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.

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

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

  });

});

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;  

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