Is there any feature about animation on multiple slide item? I have tried its fine on single slide but not working on multiple item slide.

You can use JSFiddle or below code to debug.

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

<link href=".2.0/assets/owl.theme.green.css" rel="stylesheet" />
<link href=".2.0/assets/owl.theme.default.css" rel="stylesheet" />
<link href=".css/3.5.2/animate.css" rel="stylesheet" />
<link href=".2.0/assets/owl.carousel.css" rel="stylesheet" />

<script src=".0.0/jquery.min.js"></script>
<script src=".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>

Is there any feature about animation on multiple slide item? I have tried its fine on single slide but not working on multiple item slide.

You can use JSFiddle or below code to debug.

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

<link href="https://cdnjs.cloudflare./ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.green.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare./ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare./ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare./ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css" rel="stylesheet" />

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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>

Any pointers would be appreciated!

Thanks.

• javascript
• html
• css
• owl-carousel

• Your fiddle is not linked.. Kindly link it so I can see what you have tried. – Sahil Dhir Commented Feb 20, 2017 at 5:32
• here is fiddle link jsfiddle/f35ar43x/1 – Ram kumar Commented Feb 20, 2017 at 5:55
• 2 Can you please explain desired behaviour? That would help in getting better solutions. – Rajesh Commented Mar 20, 2017 at 7:33
• Do you want different slide animation? – Aslam Commented Mar 20, 2017 at 7:36
• yes, i want change animation style on autoplay – Ram kumar Commented Mar 20, 2017 at 8:30

3 Answers 3

According to my understanding, you are looking for different slide transition.

Each slide is going to get the animation class and add it to the item thus giving different animation for each slide.

Here is the 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>

Try auto play

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

$('.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./ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.green.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare./ajax/libs/OwlCarousel2/2.2.0/assets/owl.theme.default.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare./ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare./ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css" rel="stylesheet" />

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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>