javascript - Owl Carousel 2 动画不起作用

Question

我已按照此说明进行操作，但 slider 不执行淡出和淡入动画:http://www.owlcarousel.owlgraphic.com/demos/animate.html

头部 Css:

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

问题是什么？

Answer 1

您错过了类(class) class='owl-carousel'这是 owl-carousel 工作所必需的。我认为这是问题所在owl docs

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