根据视口大小销毁并初始化Owl Carousel [英] Destroy and initialize Owl Carousel 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！