javascript - 如何重新初始化 Owl Carousel 2.0？

Question

我知道在 Owl Carousel 的第一个版本中我们是这样做的:

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

好的，但是我们在第二个版本中是怎么做的，我不知道他们是如何重命名的。

Answer 1

由于某些原因 $('#your_carousel').trigger('destroy.owl.carousel') 无法正常工作。它不会删除再次重新初始化插件所需的所有类。

您需要将它们完全移除才能破坏“Owl Carousel 2”。如本期 github 上所述:https://github.com/smashingboxes/OwlCarousel2/issues/460

要销毁 owl 函数，请使用:

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

这对我来说非常有效:

// 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();