owl-carousel - 根据视口(viewport)大小销毁和初始化 Owl Carousel 2

Question

我看过很多关于这个的讨论，但没有一个能为我解决这个问题。

我正在使用 enquire.js 做我的视口(viewport)条件，我的代码如下:

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

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

9/15 更新:

我在 GitHub 上遇到了这个问题并对我的 slider 做了同样的事情:

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

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

Answer 1

尝试将响应选项添加为 false；使用你的选项 block :

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

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