❤
npm
Sign UpSign In

This package has been deprecated

Author message:

This package has been migrated to @cycjimmy/swiper-animation for scoped NPM package. Please switch to @cycjimmy/swiper-animation to stay up to date.

swiper-animation

2.0.2 • Public • Published

Swiper Animation

NPM version David deps devDependencies Status npm download jsdelivr npm license

(Releases | Demo)

This package has been deprecated

This package has been migrated to @cycjimmy/swiper-animation for scoped NPM package. Please switch to @cycjimmy/swiper-animation to stay up to date.

Install

# via npm 
$ npm install swiper-animation --save
 
# or via yarn 
$ yarn add swiper-animation

Usage

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

import SwiperAnimation from 'swiper-animation';
 
# OR
const SwiperAnimation = require('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="fadeIn" 
  data-duration=".5s" 
  data-delay="1s" 
  data-swiper-out-animation="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="fadeIn">Slider1</div>
    </div>
    <div class="swiper-slide">
      <div data-swiper-animation="fadeIn" data-duration=".5s">Slider2</div>
    </div>
    <div class="swiper-slide">
      <div data-swiper-animation="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/swiper-animation@2/build/swiper-animation.min.js"></script>

Earlier Version

Readme

Keywords

Package Sidebar

Install

npm i swiper-animation

Repository

github.com/cycdpo/swiper-animation

Homepage

github.com/cycdpo/swiper-animation#readme

Weekly Downloads

56

Version

2.0.2

License

MIT

Unpacked Size

36.1 kB

Total Files

9

Last publish

Collaborators

  • cycdpo
Try on RunKit
Report malware