owlカルーセルキャプションwith animate.css

Question

私はフクロウカルーセルでキャプションを作ろうとしています。私はanimate.cssを使用しています。 カルーセル内のキャプションにアニメーションを追加しましたが、すべてのアニメーションで機能しません。最初のスライドキャプションだけがアニメーションを持っています。ここに私のコードです。

<div class="owl-carousel owl-theme"> 

<div class="item"><img src="http://placehold.it/900x1200"> 
    <div class="caption"><h1 class="animated bounce">First Caption</h1></div> 
</div> 

<div class="item"><img src="http://placehold.it/900x1200"> 
    <div class="caption"><h1 class="animated bounce">Second Caption</h1></div> 
</div> 

<div class="item"><img src="http://placehold.it/900x1200"> 
    <div class="caption"><h1 class="animated bounce">Third Caption</h1></div> 
</div> 

<div class="item"><img src="http://placehold.it/900x1200"> 
    <div class="caption"><h1 class="animated bounce">Fourth Caption</h1></div> 
</div> 

</div><!-- End Carousel --> 

<style> 
.caption { 
    position: absolute; 
    font-size: 1.5em; 
    top: 0; 
    left: 15px; 
    border:1px solid; 
    color:orange; 
    text-shadow: 2px 2px 1px #000; 
    padding-top: 60vh; 
} 
</style> 

<script> 
$(document).ready(function(){ 
    $('.owl-carousel').owlCarousel({ 
    items:1, 
    loop:true, 
    autoplay:true, 
    autoplayTimeout:3500, 
    nav:true,  
    }) 
}); 
</script> 

私はあなたの助けを待っています。私はつまらない。

Answer 1

アニメーションは、クラスがdivに適用されたときに一度しか適用されない。したがって、スライドのすべてが開始時に一度だけアニメーション化されますが、最初のdivを見ることができるので、何も起こりません。

カルーセルのスライド変更を監視し、すべてのdivから 'animate bounce'クラスを削除してすぐに画面に表示すると、それぞれのアニメーションが表示されます。

$(document).ready(function() { 
    var owl = $('.owl-carousel'); 

    owl.owlCarousel({ 
    items: 1, 
    loop: true, 
    autoplay: true, 
    autoplayTimeout: 3500, 
    nav: true, 
    margin: 10, 
    }); 

    owl.on('changed.owl.carousel', function(event) { 
     var item = event.item.index - 2;  // Position of the current item 
     $('h1').removeClass('animated bounce'); 
$('.owl-item').not('.cloned').eq(item).find('h1').addClass('animated bounce'); 
    }); 

}); 

、その後、あなたのHTMLは、最初のスライド（他人からそれを削除）のための「バウンスをアニメーション」クラスを使用して：：これは働いている

<div id='monitor'> 

</div> 
<div class="owl-carousel owl-theme"> 

    <div class="item"><img src="http://placehold.it/200x200"> 
    <div class="caption"> 
     <h1 class="animated bounce">First Caption</h1></div> 
    </div> 

    <div class="item"><img src="http://placehold.it/200x200"> 
    <div class="caption"> 
     <h1 class="">Second Caption</h1></div> 
    </div> 

    <div class="item"><img src="http://placehold.it/200x200"> 
    <div class="caption"> 
     <h1 class="">Third Caption</h1></div> 
    </div> 

    <div class="item"><img src="http://placehold.it/200x200"> 
    <div class="caption"> 
     <h1 class="">Fourth Caption</h1></div> 
    </div> 

</div> 
<!-- End Carousel --> 

Answer 2

このjqueryのを試してみてください無限。 owl.carouselのこの例を見てください：http://wpcheatsheet.net/infinite-animated-css-in-owl-carousel/変更後にクラスをアニメーション化する必要がありましたが、この関数はowl.carousel 2にはありません：afterMoveおよびbeforeMove