如何重新启动猫头鹰旋转木马2.0？ [英] How to reinit a owl carousel 2.0?

问题描述

我知道在owl carousel的第一个版本中我们这样做：

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.

推荐答案

由于某些原因 $（'＃your_carousel'）。触发器（'destroy.owl.carousel'） 无法正常工作。它不会删除重新启动插件所需的所有类。

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.

您需要完全删除它们才能销毁owl carousel 2。如本期github中所述： https://github.com/smashingboxes/OwlCarousel2/issues/460

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

这对我来说非常合适：

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

这篇关于如何重新启动猫头鹰旋转木马2.0？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！