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

回答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.

回答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

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

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

回答4:

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

回答5:

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

best option to reinit & update

回答6:

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;

来源：https://stackoverflow.com/questions/25339140/change-owl-carousel-2-options-after-setup

标签

javascript

jquery

html5

css3

owl-carousel