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.

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');

    }
});

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.

Update 9/15:

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

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

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!

回答1:

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

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

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!

来源：https://stackoverflow.com/questions/25817411/destroy-and-initialize-owl-carousel-based-on-viewport-size

标签

owl-carousel