根据视口大小销毁和初始化 Owl Carousel 2 [英] Destroy and initialize Owl Carousel 2 based on viewport size

问题描述

我读过很多关于这个的讨论，但没有一个能帮我解决这个问题.

I've read a bunch of discussions about this, but none of them have solved this for me.

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

I am using enquire.js to do my viewport conditions and my code is as follows:

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 被触发时，我的控制台会抛出这个错误:

Everything is working as expected except that when destroy is triggered, my console throws this error:

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

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

When that happens, the slider will no longer initialize when my condition is matched. I'm not sure what exactly is happening.

更新 9/15:

我在 GitHub 上遇到了这个问题，并对我的滑块做了同样的处理:

I came across this issue on GitHub and did the same to my slider:

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

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

I am now able to destroy and reinitialize OwlCarousel because the classes and wrapper are gone. However, I am still getting that console error. The error repeats everytime the viewport resizes, so it's not ideal despite my slider behaving correctly. Any help as to why I'm getting that error would be awesome!

推荐答案

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

Try adding the responsive option as false; using your option block:

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

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

For me adding this stopped the ThrottledResize event from firing, I'm guessing Owl has a delayed event that fires after it's destroyed causing the error. And cheers to your link (9/15) helped me out!

这篇关于根据视口大小销毁和初始化 Owl Carousel 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！