Owl carousel fade not working with bootstrap 4

Question

I have an owl carousel slider and I need fade effect. According to owl carousel doc, needs to add animate css library. So I have added it to my site. But it's not working at all. Seems all stacked behind each slide.

Here are my options for slider

$('.home-slider-2').owlCarousel({
    animateOut: 'slideOutDown',
    animateIn: 'flipInX',
    items:1,
    margin:30,
    stagePadding:30,
    smartSpeed:450
});

So I tried this way,

• Remove bootstrap 4 jQuery slim and add full version.
• Adjust smartSpeed:450 to higher

Still no any luck. Here is my fiddle

Any help?

Answer 1

The problem here is that Owl carousel uses the version 3.x of animate.css. In the latest version of animate.css (4.x) we need to add animate__animated class to that element, we want to animate whereas in the version 3.x we needed to add animated class to the element.

Owl carousel uses to automatically add the animated class and you just have to specify the animation you want.

Now, there are two ways to do it:

1. Either you change the link tag to:

   <link rel="stylesheet" 
   href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"/>
   

   From:

   <link rel="stylesheet" 
   href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   

2. Or Change the classes in the js according to the new version, like this:

   $(".home-slider-2").owlCarousel({
      animateOut: "animate__animated animate__slideOutDown",
      animateIn: "animate__animated animate__flipInX",
      items: 1,
      smartSpeed: 450
   });
   

Check it in action on Codepen: https://codepen.io/manaskhandelwal1/pen/ZEBBXPw

---

Note

The animate.css file should be above the Owl carousel files.

---

You should use some better library to do so because even the OwlCarousel2 GitHub says

YEAH SO THIS IS PRETTY MUCH DEAD, DO YOURSELF A FAVOR AND SWITCH TO tiny-slider