是否有关于多个幻灯片项目上的动画的功能?我已经在单张幻灯片上尝试过了,但不适用于多项目幻灯片。
您可以使用JSFiddle https://jsfiddle.net/f35ar43x/1/或下面的代码进行调试。
$('.loop-test').owlCarousel({
center: true,
items: 2,
loop: true,
margin: 10,
animateOut: 'slideOutDown',
animateIn: 'flipInX',
dots: true
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.green.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/owl.carousel.min.js"></script>
<div class="owl-carousel loop-test">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
任何指示将不胜感激!
Thanks.
据我了解,您正在寻找不同的幻灯片过渡。
每张幻灯片都会获取动画类并将其添加到项目中,从而为每张幻灯片提供不同的动画。
这里是更新了小提琴 https://jsfiddle.net/f35ar43x/3/
<div class="owl-carousel loop-test">
<div data-animate="flipInX animated"> Your Content </div>
<div data-animate="bounceIn animated"> Your Content </div>
<div data-animate="fadeIn animated"> Your Content 2 </div>
<div data-animate="flipInX animated"> Your Content </div>
<div data-animate="fadeIn animated"> Your Content </div>
<div data-animate="flipInY animated"> Your Content </div>
<div data-animate="fadeIn animated"> Your Content </div>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)