Custom effects

Demo

import $ from 'jquery';
import 'velocity-animate';
import 'velocity-animate/velocity.ui.min';
import { RSBaseCarousel, constants } from 'rs-carousel/lib/rs-carousel.min';

const { animationsNames, directions } = constants;

class FadeCarousel extends RSBaseCarousel {
  registerAnimations() {
    const easing = this.settings.easing;
    const fadeOutParams = [
      [{ opacity: [0, 1], translateZ: 0 }, 1, { easing }],
    ];
    const fadeInParams = [
      [{ opacity: [1, 0], translateZ: 0 }, 1, { easing }],
    ];

    Object.keys(constants.directions).forEach((key) => {
      const dir = directions[key];
      const animInName = animationsNames.in[dir];
      const animOutName = animationsNames.out[dir];

      this.registerAnimation(animInName, fadeInParams);
      this.registerAnimation(animOutName, fadeOutParams);
    });
  }
}

$(() => {
  const $element = $('.js-rs-carousel');
  const carousel = new FadeCarousel($element, {
    duration: 1250,
    easing: 'ease',
  });
  console.log(carousel);
});