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, specialising in responsive WordPress websites. With over 10 years experience in the industry, Rik has worked on award-winning teams at agencies, in-house and as a freelancer. Rik has worked with clients ranging from the NHS, Sky and Skipton Building Society to McDonalds, Lamb’s Navy Rum and Crabbie’s Ginger Beer.

Outside of work Rik is also a keen writer, an amateur woodworker, gamer and foodie. His blog posts, reviews and Tweets have been published by the BBC, the Evening Standard, the Guardian and the Independent. He has written guest posts for a number of agencies and industry websites.