Geek Answers Handbook

Owl animation on several slides

Is there any animation feature on multiple slide elements? I tried it on one slide, but did not work on several slides.

You can use JSFiddle or below code for debugging.

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

Any pointers would be appreciated!

Thanks.

+7
javascript html css css3 owl-carousel
source share
3 answers

In my opinion, you are looking for different slides.

Each slide is going to get an animation class and add it to the element, thereby giving different animations 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>
+7
source share

Try autorun

 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

+2
source share

 $('.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>
+2
source share

More articles:


All Articles