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!