# swiper-animation

> Easier way to run animations on swiper.

Latest version **2.0.2** (published 2019-10-11) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install swiper-animation
pnpm add swiper-animation
yarn add swiper-animation
bun add swiper-animation
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2019-10-11 |
| First published | 2017-11-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 35.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | cycjimmy |
| Maintainers | cycjimmy |
| Keywords | swiper, animation |

## Links

- npm: https://www.npmjs.com/package/swiper-animation
- Repository: https://github.com/cycdpo/swiper-animation
- Homepage: https://github.com/cycdpo/swiper-animation#readme
- Issues: https://github.com/cycdpo/swiper-animation/issues
- npm.io page: https://npm.io/package/swiper-animation

## Dependencies (1)

- [awesome-js-funcs](https://npm.io/package/awesome-js-funcs.md) ^0.1.6

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 2.0.2 (latest) — 2019-10-11
- 2.0.1 — 2019-08-06
- 2.0.0 — 2019-07-26
- 1.4.0 — 2019-07-18
- 1.3.0 — 2019-07-03
- 1.2.5 — 2019-07-03
- 1.2.4 — 2019-02-11
- 1.2.2 — 2018-08-30
- 1.2.1 — 2018-05-28
- 1.2.0 — 2018-05-04
- 1.1.0 — 2018-03-27
- 1.0.0 — 2017-12-09
- 0.0.3 — 2017-11-27
- 0.0.2 — 2017-11-24

## README

# Swiper Animation

[![NPM version][npm-image]][npm-url]
[![David deps][david-image]][david-url]
[![devDependencies Status][david-dev-image]][david-dev-url]
[![npm download][download-image]][download-url]
[![jsdelivr][jsdelivr-image]][jsdelivr-url]
[![npm license][license-image]][download-url]

[npm-image]: https://img.shields.io/npm/v/swiper-animation.svg?style=flat-square
[npm-url]: https://npmjs.org/package/swiper-animation
[david-image]: https://img.shields.io/david/cycdpo/swiper-animation.svg?style=flat-square
[david-url]: https://david-dm.org/cycdpo/swiper-animation
[david-dev-image]: https://david-dm.org/cycdpo/swiper-animation/dev-status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/cycdpo/swiper-animation?type=dev
[download-image]: https://img.shields.io/npm/dm/swiper-animation.svg?style=flat-square
[download-url]: https://npmjs.org/package/swiper-animation
[jsdelivr-image]: https://data.jsdelivr.com/v1/package/npm/swiper-animation/badge
[jsdelivr-url]: https://www.jsdelivr.com/package/npm/swiper-animation
[license-image]: https://img.shields.io/npm/l/swiper-animation.svg?style=flat-square

([Releases](https://github.com/cycdpo/swiper-animation/releases) | [Demo](https://cycdpo.github.io/swiper-animation/))

## This package has been deprecated
[new-url]: https://github.com/cycjimmy/swiper-animation

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

## Install
```shell
# via npm
$ npm install swiper-animation --save

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

## Usage
**Swiper Animation based on [Swiper](https://github.com/nolimits4web/Swiper). Add Script of swiper in your project first.**

```javascript
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.
```html
<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](https://github.com/daneden/animate.css)
* Other Animation lib
* Custom animation

## Use in browser
```html
<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:
```text
<script src="https://cdn.jsdelivr.net/npm/swiper-animation@2/build/swiper-animation.min.js"></script>
```

## Earlier Version
* [1.x](https://github.com/cycdpo/swiper-animation/tree/1.x)

---
_Source: https://npm.io/package/swiper-animation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._