एकाधिक स्लाइड उल्लू कैरोसेल पर एनीमेशन

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>