淡入淡出猫头鹰轮播效果不起作用

Posted 2023-03-06

【中文标题】淡入淡出猫头鹰轮播效果不起作用

【英文标题】：Fade in and out owl carousel effect not working

【发布时间】：2016-02-21 07:08:37

【问题描述】：

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

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

【参考方案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
);

【讨论】：

我试过了，效果变成了滑动效果，

如果你能放一个demo，那将有助于正确回答。

@user9437856 这是一个延迟响应，但请找到更新的链接。

【参考方案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

【讨论】：

链接已过期

@Benjamin，你能做一个 jsfiddle 或 code pan 吗？因为我试过了，但它不起作用

【参考方案3】：

animateIn: '淡入', animateOut: 'fadeOut',

Will Work 版本 - Owl Carousel v2.2.1

【讨论】：

使用最新版本，并添加 animate.css 并使用这些链接获得更多帮助owlcarousel2.github.io/OwlCarousel2/docs/dev-external.html

landmarkmlp.com/js-plugin/owl.carousel/demos/transitions.html