带有 animate.css 的猫头鹰轮播标题答案

【问题标题】：Owl carousel caption with animate.css带有 animate.css 的猫头鹰轮播标题
【发布时间】：2017-04-10 15:35:54
【问题描述】：

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

我正在等待您的帮助。我卡住了

【问题讨论】：

您是否考虑过将您的 .animated css 重新标记为 .active ？如果您将代码重新格式化为 jsfiddle，那么人们会更容易+更快地提供帮助。
是的，你说得对，这是我的小提琴jsfiddle

标签： javascript jquery css twitter-bootstrap animate.css

【解决方案1】：

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

如果您观察轮播中的幻灯片变化，然后从所有 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 中仅对第一张幻灯片使用“动画弹跳”类（将其从其他幻灯片中删除）：

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

这是无限的。看看这个 owl.carousel 的例子：http://wpcheatsheet.net/infinite-animated-css-in-owl-carousel/ 你必须在更改后删除动画类，但 owl.carousel 2 中缺少此功能：afterMove 和 beforeMove

【讨论】：