Owl Carousel 2 – Flashing slides on loop

I’ve used Owl Carousel (and now Owl Carousel 2) for years but still have to look up the same issue time and again. Whenever I use either fadeIn or fadeOut transitions combined with loop: true then there’s a brief flash whenever the carousel hits the end of the last slide and loops back to the first.

The fix for this is a simple bit of CSS, but rather than hitting Google every 6 months to look this up again, I’ve made this post to make my life easier – and hopefully help others! I’ll include my owlCarousel call to show the exact circumstances, and the CSS fix below.

scripts.js

// Owl Carousel
 $('.hero-carousel').owlCarousel({
  items: 1,
  dots: true,
  loop: true,
  autoplay: true,
  autoplayTimeout: 5000,
  autoplayHoverPause: true,
  animateOut: 'fadeOut', 
  mouseDrag: false,
 });

style.css

.owl-item {
 -webkit-backface-visibility: hidden;
 -webkit-transform: translateZ(0) scale(1.0, 1.0);
}