Question

我知道在猫头鹰旋转木马的第一个版本中我们这样做：

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

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

Answer 1

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

你需要完全移除它们以摧毁猫头鹰旋转木马2＆＃34;。就像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 branch：

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

或直接访问插件：

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

Answer 3

这绝对有效：

if (container.hasClass("owl-carousel")) {
    container.owlCarousel({
        touchDrag: false,
        mouseDrag: false
    });
    container.data('owlCarousel').destroy();
    container.removeClass('owl-carousel owl-loaded');
    container.find('.owl-stage-outer').children().unwrap();
    container.removeData();
}

插件本身：

if (this.settings.responsive !== false) {
                window.clearTimeout(this.resizeTimer);
                $(window).off('resize.owl.carousel');
                this.off(window, 'resize', this.e.onThrottledResize);
            }

在Owl.prototype.destroy = function（）

中

Answer 4

现在，你可以像那样摧毁它：

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

Answer 5

我不确定，您是否尝试过替换？

根据此处http://www.owlcarousel.owlgraphic.com/docs/api-events.html列出的OwlCarousel文档，要触发的事件是＆＃34; replace.owl.carousel ＆＃34;。您可以像这样实现它：

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

希望有所帮助！

Answer 6

如果使用v1.3，我下一步

$('#OwlWrapper').owlCarousel({option...});
$('#OwlWrapper').append('<div><img class="img-fluid" src="demo_files/images/1200x800/5-min.jpg" alt=""></div>');
$('#OwlWrapper').data('owlCarousel').reinit();

这对我有用。

Answer 7

$（'＃your_carousel'）。trigger（'destroy.owl.carousel'）。removeClass（'owl-carousel 猫头鹰”）； $（'＃your_carousel'）。find（'。owl-stage-outer'）。children（）。unwrap（）;

只需执行此操作即可销毁猫头鹰轮播，然后使用常规的init函数重新初始化。

Answer 8

对于Owl Carousel v2.3.4 版本，

// Slider element.
let sliderElement = $('#msg-slider');

// Destroy first.
sliderElement.trigger('destroy.owl.carousel');

// Then empty whole owl div.
sliderElement.empty();

// Re-init owl slider.
sliderElement
    .owlCarousel({
        loop:true,
        margin:0,
        nav:false,
        dots:true,
        responsive:{
            0: {
                items: 1
            },
            600: {
                items:1
            },
            1000: {
                items:1
            }
        }
});

希望这会对某人有所帮助。谢谢。

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

8 个答案: