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日）帮助了我！

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

1 个答案: