猫头鹰轮播淡入淡出不适用于引导程序 4 现在，有两种方法可以做到：

编程问答 2022-05-26

问题描述

我有一个猫头鹰旋转木马滑块，我需要淡入淡出效果。根据 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

有什么帮助吗？

解决方法

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

尝试这样的事情

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

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

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

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


  1. 要么将链接标签更改为：

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

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

htmljavascriptjqueryowl-carousel-2