猫头鹰旋转木马褪色不工作与引导4

Question

我有一个猫头鹰旋转滑块，我需要淡出效果。根据owl carousel文档，需要添加动画css库。所以我把它添加到我的网站。但它根本不起作用。似乎都堆在每张幻灯片后面。

这里是我的滑动器

选项

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

我试过了，

• 删除bootstrap 4 jQuery slim并添加完整版本。
• 调整smartSpeed:450至更高

仍然没有任何运气。这是我的小提琴

帮忙吗?

Answer 1

这里的问题是Owl carousel使用animate.css的3.x版本。在animate.css (4.x)的最新版本中，我们需要为该元素添加animate__animated类，我们想要动画，而在3.x版本中，我们需要为元素添加animated类。

Owl carousel用来自动添加animated类，你只需要指定你想要的动画。

现在，有两种方法:

1. 您可以将link标签更改为:

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

   来自:

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

2. 或者根据新版本更改js中的类，如下所示:

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

在Codepen上查看:https://codepen.io/manaskhandelwal1/pen/ZEBBXPw

---

注意

animate.css文件应该在Owl carousel文件的上面。

---

你应该使用一些更好的库来做到这一点，因为即使是OwlCarousel2 GitHub也说

是的，所以这几乎是死的，帮你自己一个忙，切换到tiny-slider

Answer 2

要使用animation .css，您需要将以下类添加到元素&;animate_animated animate__(这是您的动画名称)&;

试试这样

animateOut: 'animate__animated animate__slideOutDown',
animateIn: 'animate__animated animate__flipInX',