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，因此没有其他任何事情发生。

如果您在旋转木马中观察幻灯片更改，然后移除“动画弹跳”＃39;来自所有div的类，然后立即将其重新应用到屏幕上的类，然后您可以看到每个div都有动画。

试试这个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中只使用＆＃39; animate bounce＆＃39;第一张幻灯片的类（从其他幻灯片中删除）：

<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

猫头鹰旋转木马标题与animate.css

2 个答案: