Swiper Animation

• Easier way to run animations on swiper. (Demo)
• swiper-animation has been renamed to @cycjimmy/swiper-animation for scoped NPM package.

Install

# via npm
$ npm install @cycjimmy/swiper-animation --save

# or via yarn
$ yarn add @cycjimmy/swiper-animation

Usage

Swiper Animation based on Swiper. Add Script of swiper in your project first.

import SwiperAnimation from '@cycjimmy/swiper-animation';

# OR
const SwiperAnimation = require('@cycjimmy/swiper-animation');

// use swiper 3.x
const swiperAnimation = new SwiperAnimation();
const mySwiper3 = new Swiper('.swiper-container', {
  onInit: function(swiper) {
    swiperAnimation.init(swiper).animate();
  },
  onSlideChangeEnd: function(swiper) {
    swiperAnimation.init(swiper).animate();
  }
});

// use swiper 4+
const swiperAnimation = new SwiperAnimation();
const mySwiper4 = new Swiper('.swiper-container', {
  on: {
    init: function () {
      swiperAnimation.init(this).animate();
    },
    slideChange: function () {
      swiperAnimation.init(this).animate();
    }
  }
});

Add attribute on elements you want animated.

<div 
  data-swiper-animation="animate__fadeIn" 
  data-duration=".5s" 
  data-delay="1s" 
  data-swiper-out-animation="animate__fadeOut"
  data-out-duration=".2s"
>Animation</div>

• data-swiper-animation: [Option] Animation class name for entering slide.
• data-swiper-animation-once: [Option] One-time Animation class name for entering slide.
• data-duration: [Option] Set animation-duration. Default: .5s.
• data-delay: [Option] Set animation-delay. Default: .5s.
• data-swiper-out-animation: [Option] Animation class name for leaving slide. Delay for leaving Animation is not supported.
• data-out-duration: [Option] Set animation-duration for leaving slide. The value must be less than .5s. Default: .5s.

Animation Effect

• Recommended Animate.css
• Other Animation lib
• Custom animation

Use in browser

<link href="animate.min.css" rel="stylesheet">
<link href="swiper.min.css" rel="stylesheet">

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div data-swiper-animation="animate__fadeIn">Slider1</div>
    </div>
    <div class="swiper-slide">
      <div data-swiper-animation="animate__fadeIn" data-duration=".5s">Slider2</div>
    </div>
    <div class="swiper-slide">
      <div data-swiper-animation="animate__fadeIn" data-duration=".5s" data-delay="1s">Slider3</div>
    </div>
  </div>
</div>

<script src="swiper.min.js"></script>
<script src="swiper-animation.min.js"></script>
<script>
  // use swiper 3.x
  var swiperAnimation = new SwiperAnimation();
  var mySwiper3 = new Swiper('.swiper-container', {
    onInit: function(swiper) {
      swiperAnimation.init(swiper).animate();
    },
    onSlideChangeEnd: function(swiper) {
      swiperAnimation.init(swiper).animate();
    }
  });

  // use swiper 4+
  var swiperAnimation = new SwiperAnimation();
  var mySwiper4 = new Swiper('.swiper-container', {
    on: {
      init: function () {
        swiperAnimation.init(this).animate();
      },
      slideChange: function () {
        swiperAnimation.init(this).animate();
      }
    }
  });
</script>

CDN

To use via a CDN include this in your HTML:

<script src="https://cdn.jsdelivr.net/npm/@cycjimmy/swiper-animation@4/dist/swiper-animation.umd.min.js"></script>

Earlier Version

• 1.x