Menu
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.
986
Use transitionStyle option to set transtion. There are four predefined transitions: "fade" , "backSlide" , goDown and scaleUp . You can also build your own transition styles easily. For example by adding "YourName" value transitionStyle: "YourName" , owlCarousel will add .
Owl Carousel hasn't been updated in 3 years and is officially deprecated by its maintainers.
Setting of the responsive is very simple. Structure of responsive option: responsive : { // breakpoint from 0 up 0 : { option1 : value, option2 : value, ... }, // breakpoint from 480 up 480 : { option1 : value, option2 : value, ... }, // breakpoint from 768 up 768 : { option1 : value, option2 : value, ... } }
Since you are using OwlCarousel version 1, please check out their documentation. This also says pagination (dots) can be turned off with: pagination: false, The dots: false, is for version 2.
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.
52
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! :)
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
