フクロウカルーセル2 - カスタムアニメーションのタッチ

Question

モバイルデバイスにカスタムアニメーションオプションを使用できますか？

私はオプションanimateInとanimateOutをfadeInとfadeOutで使用しました。 これはうまくいきます。カルーセルは自動再生時にこの効果を使用しますが、スワイプスライドにしようとすると、このアニメーションは無効になり、カルーセルはデフォルトのスライドのようにスライドします。

$('.carousel').owlCarousel({ 
    mouseDrag:false, 
    touchDrag:true, 
    loop:true, 
    animateOut: 'fadeOut', 
    animateIn: 'fadeIn', 
    autoplay:true, 
    margin:0, 
    nav:true, 
    dots:false, 
    navText: ['',''], 
    responsive: { 
     0:{ 
      items:1 
     }, 
     600: { 
      items:1 
     }, 
     1000: { 
      items:1 
     } 
    } 
}); 

アニメーションオプションはtouchdragには効果がありません。

Answer 1

私のソリューションは理想的ではないかもしれませんが、thisのようなものが動作可能性があります

$(".carousel").owlCarousel({ 
    mouseDrag: false, 
    touchDrag: true, 
    loop: true, 
    animateOut: "fadeOut", 
    animateIn: "fadeIn", 
    autoplay: true, 
    margin: 0, 
    nav: true, 
    dots: false, 
    navText: ["", ""], 
    responsive: { 
    0: { 
     items: 1 
    }, 
    600: { 
     items: 1 
    }, 
    1000: { 
     items: 1 
    } 
    }, 
    onDragged: function(e) { 
    $(e.target).hide().fadeIn("slow"); 
    } 
}); 

だから我々はonDraggedイベントに結びつけると、単純に隠し、フェードインで全体のカルーセル。それがバグではないことを確認するためにテストを行いますが、これは一種のストップギャップソリューションとして機能するかもしれません（基本的な移行を隠すだけの最良の方法ではなく、非常に迅速に）。