Owl Carousel fade effect not working

Question

I'm trying to apply the fade effect on a Owl Carousel but it does not seem to work.

As you can see in this fiddle - http://jsfiddle.net/lav911/fHa6J/ , I'm loading the transitions.css file mentioned in their docs.

Am I missing something? Why does it slide instead of fading ? Also, notice the fade does not work even on their site.

Later edit: It seems to fade on Google Chrome 35 and Firefox, but on Google Chrome 36 it will slide. Strange.

Answer 1

The problem is that owl plugin includes IE10 and 11 among the browsers that don't support CSS transform. So you can use owl carousel in combination with Modernizr and replace the "support3d" variable:

support3d = (asSupport !== null && asSupport.length === 1);

with

support3d = (Modernizr.csstransforms3d);

that seems to solve it! :)

Answer 2

Change

support3d = (asSupport !== null && asSupport.length == 1);

to

support3d = (asSupport !== null && asSupport.length >= 1);

https://github.com/OwlFonk/OwlCarousel/issues/515

Answer 3

From update 1.3.2 all transitions styles are moved out from main owl.carousel.css file to owl.transitions.css

Link owl.transitions.css in your head or import it in your css.

Answer 4

It was reported apparently on the plugin's github repo - https://github.com/OwlFonk/OwlCarousel/issues/346

Simply using this version of the plugin (pull-request) fixed it.

Answer 5

Since chrome now both supports -webkit-transform and the transform property, the owl code fails, since its 3dsupport detection is only returning true if the returned array (of transform styles) is equal to 1, simply change this line:

support3d = (asSupport !== null && asSupport.length === 1);

To this line:

support3d = (asSupport !== null && asSupport.length > 0);

And it should work ;)