Owl 旋转木马淡入淡出不适用于 bootstrap 4

Question

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

这是我的滑块选项

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

所以我尝试了这种方式，

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

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

有什么帮助吗？

Answer 1

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

尝试这样的事情

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

Answer 2

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

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

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

要么将 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">

或者根据新版本把js里面的class改成这样：

$(".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 说

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

Owl 旋转木马淡入淡出不适用于 bootstrap 4

Owl carousel fade not working with bootstrap 4

html

javascript

css

jquery

owl-carousel-2

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