时间戳

首页 > 解决方案 > Owl carousel fade not working with bootstrap 4

javascript - Owl carousel fade not working with bootstrap 4

问题描述

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,

Still no any luck. Here is my fiddle

Any help?

标签： javascripthtmljquerycssowl-carousel-2

解决方案

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

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也说

是的，所以这已经死了，你自己帮个忙，然后改用小滑块

推荐阅读