Animate.css 不适用于 Owl Carousel 幻灯片过渡答案

【问题标题】：Animate.css doesn't work on Owl Carousel slide transitionAnimate.css 不适用于 Owl Carousel 幻灯片过渡
【发布时间】：2021-08-07 15:14:50
【问题描述】：

我使用 Owl Carousel 创建了一张幻灯片。如您所见，我同时导入了 Owl 和 animate.css CDN：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" integrity="sha512-c42qTSw/wPZ3/5LBzD+Bw5f7bSF2oxou6wEb+I/lqeaKV5FDIfMvvRp772y4jcJLKuGUOpbJMdg/BTl50fJYAw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

这是 Owl Carousel HTML 代码：

<div class="carousel-container">
            <div class="owl-carousel owl-theme">
                <div class="section6-item">
                    <img class="pr-6" src="../img/slide1.png" alt="" srcset="">
                    <div>
                        <h1>Lorem Ipsum</h1>
                        <p>Lorem Ipsum</p>
                    </div>                    </div>
                <div class="section6-item">
                    <img class="pr-6" src="../img/slide2.png" alt="" srcset="">
                    <div>
                        <h1>Lorem Ipsum</h1>
                        <p>Lorem Ipsum</p>
                    </div>
                </div>
                <div class="section6-item">
                    <img class="pr-6" src="../img/slide3.png" alt="" srcset="">
                    <div>
                        <h1>Lorem Ipsum</h1>
                        <p>Lorem Ipsum</p>
                    </div>
                </div>
                <div class="section6-item">
                    <img src="../img/slide4.png" alt="" srcset="">
                    <div>
                        <h1>Lorem Ipsum</h1>
                        <p>Lorem Ipsum</p>
                    </div>
                </div>
            </div>
            <div class="nav-arrows">
                <button class="btn-prev"><i class="fas fa-chevron-left"></i></button>
                <button class="btn-next"><i class="fas fa-chevron-right"></i></button>
            </div>
        </div>

这里是带有 animateIn 和 animateOut 的 Owl carousel 的 JQuery 代码：

$('.owl-carousel').owlCarousel({
margin: 10,
animateOut: 'rollOut',
animateIn: 'rollIn',
responsive: {
    0: {
        items: 1,
        center:true,
        loop:true
    },
    600: {
        items: 1,
        center: true,
        loop: true
    },
    1000: {
        items: 1,
        center:true,
        loop: true
    }
}

});

问题是 AnimateIn 和 AnimateOut 不起作用，请帮助我，我卡住了。

【问题讨论】：

标签： jquery owl-carousel animate.css

【解决方案1】：

我认为您只是忘记包含 jquery 并且轮播的设置不正确。这行得通。

$(function() {
  // Owl Carousel
  var owl = $(".owl-carousel");
  owl.owlCarousel({
    items: 1,
    loop: true,
    nav: true,
    autoplay: true,
    autoplayTimeout: 2000,
    smartSpeed: 1000,
    animateOut: "rollOut",
    animateIn: "rollIn",
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/>
<div class="carousel-container">
  <div class="owl-carousel owl-theme">
    <div class="section6-item">
      <img class="pr-6" src="https://via.placeholder.com/150" alt="" srcset="">
      <div>
        <h1>Lorem Ipsum</h1>
        <p>Lorem Ipsum</p>
      </div>
    </div>
    <div class="section6-item">
      <img class="pr-6" src="https://via.placeholder.com/150" alt="" srcset="">
      <div>
        <h1>Lorem Ipsum</h1>
        <p>Lorem Ipsum</p>
      </div>
    </div>
    <div class="section6-item">
      <img class="pr-6" src="https://via.placeholder.com/150" alt="" srcset="">
      <div>
        <h1>Lorem Ipsum</h1>
        <p>Lorem Ipsum</p>
      </div>
    </div>
    <div class="section6-item">
      <img src="https://via.placeholder.com/150" alt="" srcset="">
      <div>
        <h1>Lorem Ipsum</h1>
        <p>Lorem Ipsum</p>
      </div>
    </div>
  </div>
  <div class="nav-arrows">
    <button class="btn-prev"><i class="fas fa-chevron-left"></i></button>
    <button class="btn-next"><i class="fas fa-chevron-right"></i></button>
  </div>
</div>

【讨论】：