切换到猫头鹰旋转木马效果无效

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

Above is my owl carousel quote, i want to have the fade in and out effect but it doesnt seems to appear. Instead it appears as sliding effect.

上面是我的猫头鹰传送带，我想要有渐隐效果，但它似乎没有出现。相反，它表现为滑动效应。

3 个解决方案

#1

I don't think there is any option for fade transition:

我不认为有任何退色过渡的选择:

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

another option is to use animate.css in conjunction with it:

另一个选择是使用动画。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
});

#2

Interesting would be which version you are using.. Your code example mixes up options from versions 1.3.* and 2.*.

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

Since version 2.* you need:

因为版本2。*你需要:

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

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

In version 1.3.* you need:

在1.3版本中。*你需要:

transitionStyle: "fade"

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

http://www.landmarkmlp.com/js-plugin/owl.carousel/定制

#3

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

animateIn:渐明,animateOut:“渐隐”,

Will Work version - Owl Carousel v2.2.1

工作版本- Owl Carousel v2.2.1 ?

#1