Owl Carousel fade in fadeout effect not working using animate.css

Question

I am using the OwlCarousel2 slider ( https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html ). I need fade in fade out effect on the image. I tried using animate.css but it's not working. It continues sliding from right to left.

I tried transitionStyle: "fade", but it's not working properly.

I don't know where I am wrong. Can you assist me?

Would you help me out in this?

 $(document).ready(function() { $('#main-slide').owlCarousel({ navigation: true, // navigationText: ["", ""], slideSpeed: 300, paginationSpeed: 400, autoPlay: true, mouseDrag: true, singleItem: true, animateIn: 'fadeIn', // add this animateOut: 'fadeOut', // and this responsiveClass: true, responsive: { 0: { items: 1 // nav:true }, 600: { items: 1, nav: false }, 1000: { items: 1, nav: true, loop: false } } }); }); 

 body, html { height: 100%; margin: 0; padding: 0; } .owl-carousel { position: relative; height: 100%; } .owl-carousel div:not(.owl-controls) { height: 100%; } .owl-carousel .slide-img { background-repeat: no-repeat; background-size: cover; background-position: center; } 

 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css"> <div id="main-slide" class="owl-carousel owl-theme"> <div class="item"> <div class="slide-img" style="background-image:url('https://images.unsplash.com/photo-1531535807748-218331acbcb4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=851afba7f7b48463e9e11553289b6a8f&auto=format&fit=crop&w=1567&q=80');"></div> </div> <div class="item"> <div class="slide-img" style="background-image:url('https://images.unsplash.com/photo-1531545514256-b1400bc00f31?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f168e050241c6c8041b0e9ccf98eefb9&auto=format&fit=crop&w=667&q=80');"></div> </div> <div class="item"> <div class="slide-img" style="background-image:url('https://images.unsplash.com/photo-1531496635011-06e2870a6722?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9dcbf2254660dff23e2da5ffe9a8eff8&auto=format&fit=crop&w=667&q=80');"></div> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script> 

Answer 1

Finally, I found my answer.

I was using OwlCarousel2 version 1.3.3. Now I updated the version from 1.3.3 to Owl Carousel v2.3.4 and it's working.

CSS

<link rel="stylesheet" type="text/css" href="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">

Script

<script type="text/javascript" src="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

 $(document).ready(function() { $('#main-slide').owlCarousel({ loop: true, margin: 10, slideSpeed: 300, paginationSpeed: 400, autoplay: true, // autoplayHoverPause:true, items: 1, animateIn: 'fadeIn', // add this animateOut: 'fadeOut', // and this responsiveClass: true, responsive: { 0: { items: 1 // nav:true }, 600: { items: 1, nav: false }, 1000: { items: 1, nav: true // loop:false } } }); }); 

 body, html { height: 100%; margin: 0; padding: 0; } .owl-carousel { position: relative; height: 100%; } .owl-carousel div:not(.owl-controls) { height: 100%; } .owl-carousel .slide-img { background-repeat: no-repeat; background-size: cover; background-position: center; } 

 <link rel="stylesheet" type="text/css" href="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css"> <link rel="stylesheet" type="text/css" href="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css"> <div id="main-slide" class="owl-carousel owl-theme"> <div class="item"> <div class="slide-img" style="background-image:url('https://images.unsplash.com/photo-1531535807748-218331acbcb4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=851afba7f7b48463e9e11553289b6a8f&auto=format&fit=crop&w=1567&q=80');"></div> </div> <div class="item"> <div class="slide-img" style="background-image:url('https://images.unsplash.com/photo-1531545514256-b1400bc00f31?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f168e050241c6c8041b0e9ccf98eefb9&auto=format&fit=crop&w=667&q=80');"></div> </div> <div class="item"> <div class="slide-img" style="background-image:url('https://images.unsplash.com/photo-1531496635011-06e2870a6722?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9dcbf2254660dff23e2da5ffe9a8eff8&auto=format&fit=crop&w=667&q=80');"></div> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script> <script type="text/javascript" src="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>