2016-06-02 24 views
1

フェイス効果でフクロウカルーセル2を使用しようとしていますが、デフォルトのスワイプ効果が表示されています。 。 'フェードアウト'、私はanimateInを追加したフクロウカルーセル2フェード効果が働かない

animateIn: 'fadeIn', 
    nav:true, 





    loop: true, 
    responsive: { 
     0: { 
     items: 1 
     }, 
     600: { 
     items: 2 
     },  
     1000: { 
     items: 3, 
     slideBy:3, 
     } 
    } 
    }); 

: 'フェードインここ

は、私のコード

function owlWrapperWidth(selector) { 
    $(selector).each(function(){ 
    $(this).find('.owl-carousel').outerWidth($(this).closest(selector).innerWidth()); 
    }); 
} 

owlWrapperWidth('.owl-wrapper'); 
$(window).resize(function() { 
    owlWrapperWidth($('.owl-wrapper')); 
}); 

$(」。フクロウカルーセル')owlCarousel({ animateOutよ「しかし、すべての

おかげで何の成功は

答えて

2

フクロウの機能のみSINGL」に取り組んでアニメーション化しません電子アイテム」カルーセル(一度に1枚のスライドが表示されます):

『の機能が一つのアイテムでのみ動作し、唯一の斜視プロパティをサポートするブラウザでアニメーション』

はこちらを参照してください。http://owlcarousel2.github.io/OwlCarousel2/demos/animate.html

はこちら私の現在のスライダ実装の1つは、それに応じてfadeInとfadeOutを使用し、すべてのアカウントでコードがコアフロウを正しく修正しています。

$('.index-gallery .owlcarousel').owlCarousel({ 
    themeClass: 'owl-fullscreen owl-nonav white owl-loaded', 
    autoplay:true, 
    autoplayTimeout: 4000, 
    items:1, // items to display in slider 
    //margin:0, // margin(px) on item. 
    //LOOP? - IF ONLY ONE SLIDE SEE: https://github.com/smashingboxes/OwlCarousel2/issues/548 
    loop:true, // Inifnity loop. Duplicate last and first items to get loop illusion. 
    navRewind:true, // Go to first/last. 
    nav:true, // left and right arrows 
    autoHeight: true, 
    navContainerClass: 'owl-buttons', 
    dotsClass: 'owl-pagination', 
    dotClass: 'owl-page', 
    animateOut: 'fadeOut', 
    animateIn: 'fadeIn', 
    autoplayHoverPause:true, //false 
    lazyLoad: false, // IMG need special markup class="lazyOwl" and data-src="url_to_img" or/and data-src-retina="url_to_highres_img" 
    dots:false // true 
}); 

あなたはさらにアドバイス/ソリューション/アイデアのために、このスレッドを見たいと思うことがあります。

Owl Carousel fade effect not working

+0

ニースWorking.Thankさん – mghhgm

関連する問題