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>

以上是我的猫头鹰旋转木马报价，我想要淡入淡出效果，但它似乎没有出现。相反，它显示为滑动效果。

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
});

Answer 2

有趣的是你正在使用哪个版本.. 您的代码示例混合了版本1.3。*和2。*。

中的选项

从版本2. *开始，您需要：

animateIn: 'fadeIn',
animateOut: 'fadeOut',

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

在版本1.3。*中，您需要：

transitionStyle: "fade"

http://www.landmarkmlp.com/js-plugin/owl.carousel/#customizing

Answer 3

animateIn：“ fadeIn”， animateOut：“ fadeOut”，

Will Work版本-猫头鹰轮播v2.2.1

淡入淡出猫头鹰旋转木马效果不起作用

3 个答案: