Owl 使用 animate.css 时轮播淡入淡出效果无效

Question

我正在使用 OwlCarousel2 滑块 (https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html)。我需要对图像进行淡入淡出效果。我尝试使用 animate.css 但它不起作用。它继续从右向左滑动。

我尝试了 transitionStyle: "fade", 但它无法正常工作。

我不知道我哪里错了。你能帮帮我吗？

你能帮我解决这个问题吗？

$(document).ready(function() {
  $('#main-slide').owlCarousel({

    navigation: true,
    // navigationText: ["", ""],
    slideSpeed: 300,
    paginationSpeed: 400,
    autoPlay: true,
    mouseDrag: true,
    singleItem: true,
    animateIn: 'fadeIn', // add this
    animateOut: 'fadeOut', // and this
    responsiveClass: true,

    responsive: {
      0: {
        items: 1
        // nav:true
      },
      600: {
        items: 1,
        nav: false
      },
      1000: {
        items: 1,
        nav: true,
        loop: false
      }
    }
  });


});

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.owl-carousel {
  position: relative;
  height: 100%;
}

.owl-carousel div:not(.owl-controls) {
  height: 100%;
}

.owl-carousel .slide-img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
<div id="main-slide" class="owl-carousel owl-theme">
  <div class="item">
    <div class="slide-img" style="background-image:url('https://images.unsplash.com/photo-1531535807748-218331acbcb4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=851afba7f7b48463e9e11553289b6a8f&auto=format&fit=crop&w=1567&q=80');"></div>
  </div>
  <div class="item">
    <div class="slide-img" style="background-image:url('https://images.unsplash.com/photo-1531545514256-b1400bc00f31?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f168e050241c6c8041b0e9ccf98eefb9&auto=format&fit=crop&w=667&q=80');"></div>
  </div>

  <div class="item">
    <div class="slide-img" style="background-image:url('https://images.unsplash.com/photo-1531496635011-06e2870a6722?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9dcbf2254660dff23e2da5ffe9a8eff8&auto=format&fit=crop&w=667&q=80');"></div>

  </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

Answer 1

我终于找到了答案。

我使用的是 OwlCarousel2 版本 1.3.3。现在我将版本从 1.3.3 更新到 Owl Carousel v2.3.4 并且它正在运行。

CSS

<link rel="stylesheet" type="text/css" href="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">

脚本

<script type="text/javascript" src="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

$(document).ready(function() {
  $('#main-slide').owlCarousel({
    loop: true,
    margin: 10,
    slideSpeed: 300,
    paginationSpeed: 400,
    autoplay: true,
    // autoplayHoverPause:true,
    items: 1,
    animateIn: 'fadeIn', // add this
    animateOut: 'fadeOut', // and this
    responsiveClass: true,

    responsive: {
      0: {
        items: 1
        // nav:true
      },
      600: {
        items: 1,
        nav: false
      },
      1000: {
        items: 1,
        nav: true
        // loop:false
      }
    }
  });


});

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}

.owl-carousel {
  position: relative;
  height: 100%;
}

.owl-carousel div:not(.owl-controls) {
  height: 100%;
}

.owl-carousel .slide-img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

<link rel="stylesheet" type="text/css" href="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" type="text/css" href="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
<div id="main-slide" class="owl-carousel owl-theme">
  <div class="item">
    <div class="slide-img" style="background-image:url('https://images.unsplash.com/photo-1531535807748-218331acbcb4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=851afba7f7b48463e9e11553289b6a8f&auto=format&fit=crop&w=1567&q=80');"></div>
  </div>
  <div class="item">
    <div class="slide-img" style="background-image:url('https://images.unsplash.com/photo-1531545514256-b1400bc00f31?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f168e050241c6c8041b0e9ccf98eefb9&auto=format&fit=crop&w=667&q=80');"></div>
  </div>

  <div class="item">
    <div class="slide-img" style="background-image:url('https://images.unsplash.com/photo-1531496635011-06e2870a6722?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9dcbf2254660dff23e2da5ffe9a8eff8&auto=format&fit=crop&w=667&q=80');"></div>

  </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="http://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

Owl 使用 animate.css 时轮播淡入淡出效果无效

Owl Carousel fade in fadeout effect not working using animate.css

html

javascript

css

jquery

owl-carousel