Slideshow with owlcarousel2, set movement for each slide

Question

I have created a slide show with owlcarousel2 library, and I would like to set for each slide, a different movement to appear on the screen.

For example now all the slides appears on the screen from right to left, as in a normal slide show. Is possible to set to each slide different appear movement like from left to right for some and from right to left for other?

This is my code:

and js:

 if ($.fn.owlCarousel) {
    $(".welcome_slides").owlCarousel({
        items: 1,
        margin: 0,
        loop: true,
        nav: true,
        navText: ['', ''],
        dots: false,
        autoplay: true,
        autoplayTimeout: 7000,
        smartSpeed: 500,
        autoplayHoverPause: false
    });
}

Vincent1989 · Accepted Answer

There are 2 main things you need to do:

Include animate.css in your page.

Create a custom function to select from an array of animation provided from animate.css

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

Once you have both things set up you just need to initialize owl carousel and set animateOut and animateIn to get the random value from getRandomAnimation() function.

  var owl = $('.owl-carousel');

  owl.owlCarousel({
    animateOut: getRandomAnimation,
    animateIn: getRandomAnimation,
    items: 1,
    margin: 30,
    stagePadding: 30,
    smartSpeed: 450,
    autoplay: true,
    autoplayTimeout: 2000
  });

In the below example I'm creating a random slide animation with autoplay set to 2 seconds just to show you each slide is picking up the different animation.

Example:

$(document).ready(function() {


  var owl = $('.owl-carousel');

  //init default carousel
  owl.owlCarousel({
    animateOut: getRandomAnimation,
    animateIn: getRandomAnimation,
    items: 1,
    margin: 30,
    stagePadding: 30,
    smartSpeed: 450,
    autoplay: true,
    autoplayTimeout: 2000
  });

 

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

});

.owl-carousel {
  max-width: 300px;
}

Slideshow with owlcarousel2, set movement for each slide

Answers (1)

Related Questions