猫头鹰旋转木马褪色不适用于引导程序 4答案

【问题标题】：Owl carousel fade not working with bootstrap 4猫头鹰旋转木马褪色不适用于引导程序 4
【发布时间】：2021-05-15 11:58:59
【问题描述】：

我有一个猫头鹰轮播滑块，我需要渐变效果。根据owl carousel doc，需要添加动画css库。所以我把它添加到我的网站上。但它根本不起作用。似乎都堆叠在每张幻灯片后面。

这是我的滑块选项

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

所以我尝试了这种方式，

移除 bootstrap 4 jQuery slim 并添加完整版。
将 smartSpeed:450 调高

仍然没有任何运气。这是我的fiddle

有什么帮助吗？

【问题讨论】：

标签： javascript html jquery css owl-carousel-2

【解决方案1】：

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

Owl carousel 用于自动添加animated 类，您只需指定所需的动画即可。

现在，有两种方法可以做到：

要么将链接标签更改为：

<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">

或者根据新版本更改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

【讨论】：

【解决方案2】：

要使用 Anime.css，您需要将以下类添加到元素“animate_animated animate__（这里是你的动画名称）”

试试这样的

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

【讨论】：