How to reinit a owl carousel 2.0?

Question

I know in the first version of owl carousel we do it like this :

var $carousel = $('#carousel');
var owl = $carousel.data('owlCarousel'); 
owl.reinit({touchDrag: false, mouseDrag: false;});

Ok, but how we do it in the second version, i don't know how they renamed it.

Answer 1

For some reasons $('#your_carousel').trigger('destroy.owl.carousel') is not working correctly. it does not remove all classes which are needed to reinit the plugin again.

You'll need to remove them completely to destroy the "owl carousel 2". like described here in this issue on github: https://github.com/smashingboxes/OwlCarousel2/issues/460

To destroy the owl function use:

$('#your_carousel').trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
$('#your_carousel').find('.owl-stage-outer').children().unwrap();

This worked perfect for me:

// find element
$owl = $('body').find('#your_carousel');

// set the owl-carousel otions
var carousel_Settings = {
  touchDrag: false,
  mouseDrag: false
};

function initialize(){
  var containerWidth = $('body').find('.navbar').outerWidth();
  if(containerWidth <= 767) {
    // initialize owl-carousel if window screensize is less the 767px
    $owl.owlCarousel( carousel_Settings );
  } else {
    // destroy owl-carousel and remove all depending classes if window screensize is bigger then 767px
    $owl.trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
    $owl.find('.owl-stage-outer').children().unwrap();
  }
}

// initilize after window resize
var id;
$(window).resize( function() {
  clearTimeout(id);
  id = setTimeout(initialize, 500);
});

// initilize onload
initialize();