jquery - 淡入淡出 Owl Carousel 效果不起作用

Question

    <script>
    $(document).ready(function () {
          $("#owl-demo").owlCarousel({
              navigation: true,
              navigationText: ["", ""],
              slideSpeed: 300,
              paginationSpeed: 400,
              autoPlay: true,
              mouseDrag: true,
              singleItem: true,
              animateIn: 'fadeIn',
              animateOut: 'fadeOut'
          });
      });
    </script>

上面是我的 Owl Carousel 引用，我想要淡入淡出效果，但它似乎没有出现。相反，它显示为滑动效果。

Answer 1

我认为没有任何淡入淡出过渡选项:

transitionStyle: "fade" // not available in the docs

另一个选项是使用 animate.css与之结合:

$("#owl-demo").owlCarousel({
  navigation: true,
  navigationText: ["", ""],
  slideSpeed: 300,
  paginationSpeed: 400,
  autoPlay: true,
  mouseDrag: true,
  singleItem: true,
  animateIn: 'fadeIn', // add this
  animateOut: 'fadeOut' // and this
});