Owl carousel caption with animate.css

Question

i'm trying to make captions in owl carousel. i'm using animate.css. I've added animation to captions in carousel but it's not working for all. Only first slides caption have animation. Here is my code;

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

I'm waiting your help about that. I'm stuck

Answer 1

The animation is only applied once when the class is applied to a div. Therefore all of your slides animate once at the start only, but you can only see the first div, and so nothing else happens.

If you watch for slide changes in the carousel and then remove the 'animate bounce' classes from all divs before instantly re-applying it to the one on screen then you can see each one animate.

Try this 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');
  });

});

and then in your html only use the 'animate bounce' classes for the first slide (remove it from the others):

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