複数のスライドフローのカルーセルでのアニメーション

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

自動再生を試してみてください、あなたは別のスライドトランジションを探しています。

各スライドはアニメーションクラスを取得してアイテムに追加し、各スライドに異なるアニメーションを与えます。ここで

はあなたのフィドルが、私はあなたがしようとしているものを見ることができるように親切にそれをリンク...リンクされていない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

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

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