Owl 带 animate.css 的轮播字幕

Question

我正在尝试在 owl 轮播中制作字幕。我正在使用 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

动画仅在 class 应用于 div 时应用一次。因此，您的所有幻灯片仅在开始时动画一次，但您只能看到第一个 div，因此没有其他任何事情发生。

如果您观察轮播中的幻灯片变化，然后从所有 div 中删除 'animate bounce' class，然后立即将其重新应用到屏幕上的幻灯片，那么您可以看到每一个动画。

试试这个 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 中，第一张幻灯片仅使用 'animate bounce' classes（将其从其他幻灯片中删除）：

<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/ 你必须在改变后删除 class 动画但是这个函数在 owl.carousel 2 中缺失：afterMove 和 beforeMove

Owl 带 animate.css 的轮播字幕

Owl carousel caption with animate.css

javascript

jquery

css

twitter-bootstrap

animate.css