twitter-bootstrap 猫头鹰旋转木马标题与 animate.css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43327384/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Owl carousel caption with animate.css
提问by Nihat ?zyedi
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;
我正在尝试在 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>
I'm waiting your help about that. I'm stuck
我正在等待你的帮助。我被卡住了
回答by Sam0
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 时，动画仅应用一次。因此，您的所有幻灯片仅在开始时动画一次，但您只能看到第一个 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.
如果您观察轮播中的幻灯片更改，然后从所有 div 中删除“动画反弹”类，然后立即将其重新应用于屏幕上的那个，那么您可以看到每个 div 的动画。
Try this jquery:
试试这个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):
然后在您的 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 -->
回答by Web App
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
这是无限的工作。看看 owl.carousel 的这个例子：http://wpcheatsheet.net/infinite-animated-css-in-owl-carousel/您必须在更改后删除动画类，但 owl.carousel 2 中缺少此功能：afterMove 和移动前
