根据视口大小销毁并初始化 Owl Carousel 2

Question

我已经阅读了很多关于此的讨论，但没有一个为我解决了这个问题。

我正在使用 enquire.js 来做我的视口条件，我的代码如下：

var $slider   = $('#home-farms-slider'),

    sliderOptions = {
        items: 1,
        animateOut: 'fadeOut',
        animateIn: 'fadeIn'
    };

enquire.register("screen and (min-width: 1000px)", {
    match : function() {

        $slider.owlCarousel(sliderOptions);

    },
    unmatch : function() {

        $slider.trigger('destroy.owl.carousel');

    }
});

除了destroy 被触发时，一切都按预期工作，我的控制台抛出此错误：

Uncaught TypeError: Cannot read property '_onResize' of null
owl.carousel.min.js?ver=2.0.0:1

e.onThrottledResize
owl.carousel.min.js?ver=2.0.0:1

m.isFunction.e
jquery.js?ver=1.11.1:2

发生这种情况时，当我的条件匹配时，滑块将不再初始化。我不确定到底发生了什么。

9/15 更新：

我在 GitHub 上遇到了这个问题，并对我的滑块做了同样的事情：

https://github.com/OwlFonk/OwlCarousel2/issues/460

我现在可以销毁并重新初始化 OwlCarousel，因为类和包装器已经消失了。但是，我仍然收到该控制台错误。每次调整视口大小时都会重复该错误，因此尽管我的滑块行为正确，但它并不理想。关于我为什么会收到该错误的任何帮助都会很棒！

Answer 1

尝试将响应选项添加为 false；使用您的选项块：

sliderOptions = {
    items: 1,
    animateOut: 'fadeOut',
    animateIn: 'fadeIn',
    responsive: false
};

对于我来说，添加这会阻止 ThrottledResize 事件触发，我猜 Owl 有一个延迟事件，该事件在它被破坏后触发，导致错误。欢呼你的链接 (9/15) 帮助了我！