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

Question

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

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

＆＃13;

＆＃13;

$('.loop-test').owlCarousel({
  center: true,
  items: 2,
  loop: true,
  margin: 10,
  animateOut: 'slideOutDown',
  animateIn: 'flipInX',
  dots: true
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

任何指针都将不胜感激！

感谢。

Answer 1

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

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

以下是 updated fiddle

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

Answer 2

尝试自动播放

var owl = $('.owl-carousel');
owl.owlCarousel({
    items:4,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:1000,
    autoplayHoverPause:true
});
$('.play').on('click',function(){
    owl.trigger('play.owl.autoplay',[1000])
})
$('.stop').on('click',function(){
    owl.trigger('stop.owl.autoplay')
})

JSFiddle link

Answer 3

＆＃13;

＆＃13;

$('.loop-test').owlCarousel({
     loop: true,
    items: 2,
    nav: true
});
$('.loop-test').on('translate.owl.carousel', function(event) {
    $(this).find(".item").hide();
});

 $('.loop-test').on('translated.owl.carousel', function(event) {
$(this).find(".item").fadeIn(800);
});

＆＃13;

<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 owl-theme loop-test">
   <div class="item"> Your Content </div>
   <div class="item"> Your Content </div>
   <div class="item"> Your Content </div>
   <div class="item"> Your Content </div>
   <div class="item"> Your Content </div>
   <div class="item"> Your Content </div>
   <div class="item"> Your Content </div>
</div>

＆＃13;

＆＃13;

＆＃13;