I'm trying to make captions in the Owl carousel. I'm using animate.css. I've added animation to captions in the carousel but it's not working for all. Only the first slide's caption has animation. Here is my code;

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

<div class="item"><img src=";>
    <div class="caption"><h1 class="animated bounce">First Caption</h1></div>
</div>

<div class="item"><img src=";>
    <div class="caption"><h1 class="animated bounce">Second Caption</h1></div>
</div>

<div class="item"><img src=";>
    <div class="caption"><h1 class="animated bounce">Third Caption</h1></div>
</div>

<div class="item"><img src=";>
    <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 for your help with that. I'm stuck

I'm trying to make captions in the Owl carousel. I'm using animate.css. I've added animation to captions in the carousel but it's not working for all. Only the first slide's caption has 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 for your help with that. I'm stuck

• javascript
• jquery
• css
• twitter-bootstrap
• animate.css

• have you considered relabelling your .animated css to .active ? if you reformat your code into a jsfiddle it'll be easier+quicker for people to assist. – Sam0 Commented Apr 10, 2017 at 22:28
• Yes you right, here is my fiddle jsfiddle – Nihat Özyedi Commented Apr 11, 2017 at 8:47

2 Answers 2

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

This is working infinite. Look at this example of owl.carousel : http://wpcheatsheet/infinite-animated-css-in-owl-carousel/ You had to remove class animated after change but this function is missing in owl.carousel 2: afterMove and beforeMove