在多个幻灯片猫头鹰转盘的动画

Question

在多个幻灯片项目上是否有关于动画的任何功能？我在单张幻灯片上尝试过它,但没有在多个项目幻灯片上工作.

您可以使用JSFiddle或以下代码进行调试.

$('.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>

任何指针将不胜感激!

谢谢.

Answer 1

根据我的理解,您正在寻找不同的幻灯片转换.

每张幻灯片都将获得动画类并将其添加到项目中,从而为每张幻灯片提供不同的动画.

这是更新的小提琴

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