swiper-element-animation

Swiper Animation

• Forked from cycjimmy/swiper-animation and modified by forrany (Vincent Ko), this version is used in LessCode to be compatible with the Swiper web component in Swiper 11.0.5.

Install

# via npm
$ npm i swiper-element-animation --save

# or via yarn
$ yarn add swiper-element-animation

Usage

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

import SwiperAnimation from 'swiper-element-animation';

# OR
const SwiperAnimation = require('swiper-element-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();
    }
  }
});

// use swiper element in Vue 3
const swiperAnimation = new SwiperAnimation();
const swiperParams = {
  on: {
    init() {
      swiperAnimation.init(this).animate()
    },
    slideChange() {
      swiperAnimation.init(this).animate()
    }
  }
}

Object.assign(swiper.value, swiperParams) // In Vue3， swiper.value is the dom of swiper-container

Add attribute on elements you want animated.

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

• data-swiper-animate-effect: [Option] Animation class name for entering slide.
• data-swiper-animation-once: [Option] One-time Animation class name for entering slide.
• data-swiper-animate-duration: [Option] Set animation-duration. Default: .5s.
• data-swiper-animate-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-animate-effect="animate__fadeIn">Slider1</div>
    </div>
    <div class="swiper-slide">
      <div data-swiper-animate-effect="animate__fadeIn" data-swiper-animate-duration=".5s">Slider2</div>
    </div>
    <div class="swiper-slide">
      <div data-swiper-animate-effect="animate__fadeIn" data-swiper-animate-duration=".5s" data-swiper-animate-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>

Earlier Version

• v1