Last Updated: March 08, 2016
·
4.12K
· Sasikumar Rajendran

OwlCarousel2 fix when resizing the carousel or browser

OwlCarousel 2 has a bug in chrome when resizing the window, it mixes slides together and its not usable anymore.

CSS Fix:

.owl-carousel .owl-wrapper,
.owl-carousel .owl-item{
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
}

Jquery Fix:

if ($('.owl-carousel-top').length > 0) {

mainOwlCarousel(); // does the carousel loading

$(window).resize(function() {
    $('.owl-carousel-top').trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
    $('.owl-carousel-top').find('.owl-stage-outer').children().unwrap();

    mainOwlCarousel();
});

});