wake-up-neo.com

Eulen-Karusselleffekt nicht ein- und ausblenden

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

Oben ist mein Eulenkarussellzitat, ich möchte den Ein- und Ausblendeffekt haben, aber es scheint nicht zu erscheinen. Stattdessen erscheint es als gleitender Effekt.

jqueryeffectowl-carousel
5
itnotsopro

Ich glaube nicht, dass es eine Option für den Fade-Übergang gibt: 

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

eine weitere Option ist die Verwendung von animate.css in Verbindung damit: 

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

Interessant wäre, welche Version Sie verwenden ... ... Ihr Code-Beispiel mischt Optionen aus den Versionen 1.3. * Und 2. *.

Seit Version 2. * benötigen Sie:

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

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

In Version 1.3. * Benötigen Sie:

transitionStyle: "fade"

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

4
Benjamin

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

Will Work Version - Owl Carousel v2.2.1

0
Mr. Sen