猫头鹰旋转木马2动画不工作

Owl Carousel 2 animation not work

本文关键字：工作 动画 旋转木马 猫头鹰      更新时间：2024-05-14

我按照以下说明进行了操作，但滑块不执行fadeOut和fadeIn动画：http://www.owlcarousel.owlgraphic.com/demos/animate.html

磁头Cs:

<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.css">

Html项目：

<div id="product-designs-presentation" class="owl-carousel">
    <div style="width:186px">
        <img src="svg/shirt-design-1.svg" alt="">a
    </div>
    <div style="width:186px">
        <img src="svg/shirt-design-2.svg" alt="">
    </div>
</div>

Javascript：

<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script>
$( document ).ready(function() {
    $('#product-designs-presentation').owlCarousel({
        animateOut: 'fadeOut',
        animateIn: 'fadeIn',
        items:1,
        autoPlay:true,
        autoPlayTimeout:1000,
        autoplayHoverPause:true,
        navigation: true,
        navigationText: ["prev","next"]
    });
});
</script>

问题出在哪里？

您错过了类class='owl-carousel'，这是猫头鹰转盘工作所必需的。我认为这是猫头鹰文档的问题

<div id="product-designs-presentation" class="owl-carousel">
    <div style="width:186px">
        <img src="svg/shirt-design-1.svg" alt="">a
    </div>
    <div style="width:186px">
        <img src="svg/shirt-design-2.svg" alt="">
    </div>
</div>

使用这个css这是工作

$(document).ready(function() {
  $('#product-designs-presentation').owlCarousel({
      	animateOut: 'fadeOut',
        animateIn: 'fadeIn',
        items:1,
        autoPlay:true,
        autoPlayTimeout:1000,
        autoplayHoverPause:true,
        navigation: true,
        navigationText: ["prev","next"]
  });
});
<link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>

<div id="product-designs-presentation" class="owl-carousel">
  <div style="width:186px">
    <img src="http://static.vecteezy.com/system/resources/previews/000/095/621/original/free-leaf-vector.png" alt="">a
  </div>
  <div style="width:186px">
    <img src="https://pixabay.com/static/uploads/photo/2013/07/12/15/29/maple-149907_960_720.png" alt="">b
  </div>
</div>

相关文章：