<script>
$(document).ready(function () {
$("#owl-demo").owlCarousel({
navigation: true,
navigationText: ["", ""],
slideSpeed: 300,
paginationSpeed: 400,
autoPlay: true,
mouseDrag: true,
singleItem: true,
animateIn: 'fadeIn',
animateOut: 'fadeOut'
});
});
</script>
Above is my owl carousel quote, i want to have the fade in and out effect but it doesnt seems to appear. Instead it appears as sliding effect.
I don't think there is any option for fade transition:
transitionStyle: "fade" // not available in the docs
another option is to use animate.css
in conjunction with it:
$("#owl-demo").owlCarousel({
navigation: true,
navigationText: ["", ""],
slideSpeed: 300,
paginationSpeed: 400,
autoPlay: true,
mouseDrag: true,
singleItem: true,
animateIn: 'fadeIn', // add this
animateOut: 'fadeOut' // and this
});