フクロウカルーセルにランダムアニメーション効果を追加するには？

Question

これは私がこれを行うことができます私は、ランダムなアニメーションhere.Howを使用したいフクロウカルーセルに私のコードと効果

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

ここ

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

を一つだけのアニメーションを使用してのInstedのですか？

Answer 1

これを試してみてください：

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の答えは、私のように、最初のロードでのランダムなプロパティを作成しますが、ん@あなたはまた、各タイムスライダの変更はその後、フクロウで次の変更を行い、ランダムなアニメーションを持って探している場合カルーセルライブラリファイル

、それは最初の1で2ヶ所でコードは次のようになります必要がありますthis.core.settings.animateInを探す：

 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; 

（注：私はフクロウカルーセルを使用していますが、コードは、他のバージョンでは異なる場合がありますV2.1.0）

先に行くと、その直後にこのコードを追加します。

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

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

今ファイルに再びthis.core.settings.animateInを見つけて、それがこのようなコードの周りになります

：これまでその

$(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(); 

変更

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(); 

これはアニメーションの配列をこのようなアニメーションプロパティに渡すだけで動作します：

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