Wie zufügen Animationseffekt in Eulenkarussell?

Question

Dies ist mein Code und die Wirkung auf die Eule Karussell

$(document).ready(function(){ 
      $(".owl-carousel").owlCarousel({ 
       autoplay:true, 
       autoplayTimeout:2000, 
       autoplayHoverPause:true, 
       dots: true, 
       merge:false, 
       loop:true, 
       items:1, 
       animateOut: 'bounce', 
       animateIn: 'zoomIn', 
      }); 
     }); 

Insted von hier nur eine Animation

mit

animateOut: 'bounce', 
animateIn: 'zoomIn', 

ich zufällige Animation here.How verwenden möchten, kann ich dies tun?

Answer 1

Versuchen Sie folgendes:

function getRandomAnimation(){ 
    var animationList = ['bounce', 'zoomIn']; 
    return animationList[Math.floor(Math.random() * animationList.length)]; 
}  

$(document).ready(function(){ 
     let props = { 
      autoplay:true, 
      autoplayTimeout:2000, 
      autoplayHoverPause:true, 
      dots: true, 
      merge:false, 
      loop:true, 
      items:1 
     }; 

     props['animateOut'] = getRandomAnimation(); 
     props['animateIn'] = getRandomAnimation(); 

     $(".owl-carousel").owlCarousel(props); 
}); 

Answer 2

@ ykaragol Antwort zufällige Eigenschaft nicht erstellt, sondern auf beim ersten Laden nur wie ich, wenn Sie auch zufällige Animation jedes Mal Schieber Änderungen dann tun Sie die folgenden Änderungen in Eule haben, suchen Karussell-Bibliotheksdatei (Anmerkung: ich verwende Owl Carousel V2.1.0 der Code könnte in anderen Version unterschiedlich sein):

this.core.settings.animateIn Finden sie es in 2 Plätze in erste in sollte der Code wie folgt sein:

 var left, 
     clear = $.proxy(this.clear, this), 
     previous = this.core.$stage.children().eq(this.previous), 
     next = this.core.$stage.children().eq(this.next), 
     incoming = this.core.settings.animateIn, 
     outgoing = this.core.settings.animateOut; 

Gehen Sie voran und fügen Sie diesen Code direkt danach:

 if(incoming.constructor == Array){ 
      incoming = incoming[Math.floor(Math.random() * incoming.length)]; 
     } 

     if(outgoing.constructor == Array){ 
      outgoing = outgoing[Math.floor(Math.random() * outgoing.length)]; 
     } 

Jetzt this.core.settings.animateIn wieder in der Datei finden und es wird so um Code sein:

$(e.target).css({ 'left': '' }) 
     .removeClass('animated owl-animated-out owl-animated-in') 
     .removeClass(this.core.settings.animateIn); 
     .removeClass(this.core.settings.animateOut); 
    this.core.onTransitionEnd(); 

ändern, dass dies auf:

var incoming = this.core.settings.animateIn; 
    var outgoing = this.core.settings.animateOut 

    if(incoming.constructor == Array){ 
     for (var i = incoming.length - 1; i >= 0; i--) { 
      $(e.target).removeClass(incoming[i]); 
     } 
    }else{ 
     $(e.target).removeClass(this.core.settings.animateIn); 
    } 
    if(outgoing.constructor == Array){ 
     for (var i = outgoing.length - 1; i >= 0; i--) { 
      $(e.target).removeClass(outgoing[i]); 
     } 
    }else{ 
     $(e.target).removeClass(this.core.settings.animateOut); 
    } 

    $(e.target).css({ 'left': '' }) 
     .removeClass('animated owl-animated-out owl-animated-in'); 
    this.core.onTransitionEnd(); 

Jetzt sollte dies einfach funktionieren, indem Sie ein Animationsarray übergeben, um die Eigenschaft wie folgt zu animieren:

$owlSty1.owlCarousel({ 
     animateOut: ['slideOutDown', 'zoomOut'], 
     animateIn: ['flipInX', 'zoomIn'], 
     loop: true, 
     nav: false, 
     items: 1, 
     dots: true, 
     responsive: false, 
     autoplay: true, 
     autoplayTimeout: 6000, 
     rtl: directionRTL 
    });