Here is an example of Owl Carousel 2 fade animation: .html

I think I have included all required css and js files and here is my code:

/* ==============================================
    OWL CAROUSEL
=============================================== */
var $slides_nav = ( $('#slides').attr('data-direction') == 1 ) ? true : false;
var $slides_speed = $('#slides').attr('data-speed');

$("#slides ul").owlCarousel({
    navText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
    nav: $slides_nav,
    animateOut: 'fadeOut',
    items:1,
    margin:0,
    loop:true,
    autoplay:true,
    autoplayTimeout:8000,
    autoplayHoverPause:false,
    dots: false,
    stagePadding:0,
    smartSpeed:1000,

});

The slider works but the slide transitions does not fade..

You can see in my website

Here is an example of Owl Carousel 2 fade animation: http://www.owlcarousel.owlgraphic./demos/animate.html

I think I have included all required css and js files and here is my code:

/* ==============================================
    OWL CAROUSEL
=============================================== */
var $slides_nav = ( $('#slides').attr('data-direction') == 1 ) ? true : false;
var $slides_speed = $('#slides').attr('data-speed');

$("#slides ul").owlCarousel({
    navText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
    nav: $slides_nav,
    animateOut: 'fadeOut',
    items:1,
    margin:0,
    loop:true,
    autoplay:true,
    autoplayTimeout:8000,
    autoplayHoverPause:false,
    dots: false,
    stagePadding:0,
    smartSpeed:1000,

});

The slider works but the slide transitions does not fade..

You can see in my website

• javascript
• jquery
• css
• owl-carousel

1 Answer 1

I have found the problem. I had put this in my css, necessary for others animations in the page:

.animated {
    visibility:hidden;
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    -ms-animation-delay: 0.3s;
}

This was causing the issue. I have added the code below and it works now.

.owl-item.animated {
    visibility: visible;
}