如何重新启动猫头鹰旋转木马2.0？

Question

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

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

好的,但我们如何在第二个版本中执行此操作,我不知道它们是如何重命名的.

Answer 1

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

你需要完全删除它们才能销毁"猫头鹰旋转木马2".就像github上的这个问题所描述的那样:https://github.com/smashingboxes/OwlCarousel2/issues/460

要破坏猫头鹰功能,请使用:

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

Answer 2

你可以这样做,destroy但你必须使用最新的develop分支:

$('#carousel').owlCarousel('destroy'); 
$('#carousel').owlCarousel({touchDrag: false, mouseDrag: false});

或者直接访问插件:

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

Answer 3

现在，您可以像这样销毁它：

var simple = $('#simple');
simple.owlCarousel(); // created
simple.owlCarousel('destroy'); // destroyed

Answer 4

我不确定，你尝试过更换吗？

根据此处列出的 OwlCarousel 文档（http://www.owlcarousel.owlgraphic.com/docs/api-events.html），要触发的事件是“ replace.owl.carousel ”。你可以这样实现它：

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

希望有帮助！