Owl carousel caption with animate.css

问题

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

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

回答2:

This is working infinite. Look at this example of owl.carousel : http://wpcheatsheet.net/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

来源：https://stackoverflow.com/questions/43327384/owl-carousel-caption-with-animate-css

标签

javascript

jquery

css

twitter-bootstrap

animate.css