Owl Carousel 2 – Flashing slides on loop

9th January 2017

Reading Time:

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

Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *

About the author

Rik Kendell is a developer, designer and writer in Leeds, UK. Originally from Bradford but always from Yorkshire, he specialises in front-end, responsive websites and WordPress builds. Having worked in software houses, the radio industry and design, marketing and digital agencies Rik has almost 10 years commercial experience and has worked with clients ranging from the NHS, Sky and Skipton Building Society to McDonalds, Lamb’s Rum and Crabbies Ginger Beer.

Rik is also a keen writer, covering digital/tech news, gaming, food and short fiction. His blog posts, reviews and Tweets have been published by the BBC, the Evening Standard, a number of agencies and industry websites and Rik is a key contributor on a foodie website.