Niroj Adhikary Niroj Adhikary - 7 months ago 9
Javascript Question

How to add random animation effect in owl carousel?

This is my code and effect to the owl carousel

$(document).ready(function(){
$(".owl-carousel").owlCarousel({
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:true,
dots: true,
merge:false,
loop:true,
items:1,
animateOut: 'bounce',
animateIn: 'zoomIn',
});
});


Insted of using only one animation here

animateOut: 'bounce',
animateIn: 'zoomIn',


I want to use random animation here.How can i do this?

Answer

Try this:

function getRandomAnimation(){
    var animationList = ['bounce', 'zoomIn']; 
    return animationList[Math.floor(Math.random() * animationList.length)];
}    

$(document).ready(function(){
      let props = {
          autoplay:true,
          autoplayTimeout:2000,
          autoplayHoverPause:true,
          dots: true,
          merge:false,
          loop:true,
          items:1
      };

      props['animateOut'] = getRandomAnimation();
      props['animateIn'] = getRandomAnimation();

      $(".owl-carousel").owlCarousel(props);
});