web-dev-qa-db-ja.com

フェードイン/アウトフクロウカルーセル効果が機能しない

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

上記は私のフクロウのカルーセルの引用です。フェードインとフェードアウトの効果を持ちたいのですが、表示されないようです。代わりに、スライド効果として表示されます。

jqueryeffectowl-carousel
7
itnotsopro

フェードトランジションのオプションはないと思います。

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

興味深いのは、使用しているバージョンです。コード例では、バージョン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

4
Benjamin

animateIn： 'fadeIn'、animateOut： 'fadeOut'、

動作するバージョン-Owl Carousel v2.2.1

0
Mr. Sen