文章/答案/技术大牛

发布

社区首页 >问答首页 >Animate.css在猫头鹰旋转木马幻灯片过渡上不起作用

问Animate.css在猫头鹰旋转木马幻灯片过渡上不起作用
EN

Stack Overflow用户

提问于 2021-08-07 15:14:50

回答 1查看 220关注 0票数 0

我使用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不能工作，请帮帮我，我卡住了。

animate.css

jquery

owl-carousel

回答 1

Stack Overflow用户

发布于 2021-08-07 16:21:42

我想您只是忘记了包含jquery，并且carousel的设置不正确。这是可行的。

$(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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68693641

复制

相似问题

问Animate.css在猫头鹰旋转木马幻灯片过渡上不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Animate.css在猫头鹰旋转木马幻灯片过渡上不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Animate.css在猫头鹰旋转木马幻灯片过渡上不起作用
EN