貓頭鷹旋轉木馬的標題與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」類，然後立即將其重新應用到屏幕上，那麼您可以看到每個動畫都具有動畫效果。

試試這個jQuery：

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

這是工作無窮。看看owl.carousel的這個例子：http://wpcheatsheet.net/infinite-animated-css-in-owl-carousel/你必須在改變後刪除動畫類，但是這個函數在owl.carousel 2中缺失：afterMove和beforeMove