带有animate.css的猫头鹰轮播字幕 [英] Owl carousel caption with animate.css

问题描述

我正在尝试在猫头鹰轮播中添加字幕.我正在使用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

推荐答案

仅当将类应用于div时，动画才应用一次.因此，所有幻灯片仅在开始时动画一次，但是您只能看到第一个div，因此没有其他反应.

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.

如果您观察轮播中的幻灯片变化，然后从所有div移除动画反弹"类，然后立即将其重新应用于屏幕上的那个，那么您可以看到每个动画.

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.

尝试这个jquery:

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');
  });

});

，然后在您的html中仅对第一张幻灯片使用动画反弹"类(将其从其他幻灯片中删除):

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

这篇关于带有animate.css的猫头鹰轮播字幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！