Animation on multiple slide owl carousel

Kumar picture Kumar · Feb 20, 2017 · Viewed 8.9k times · Source

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.

Any pointers would be appreciated!

Thanks.

Answer

Aslam picture Aslam · Mar 20, 2017

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>