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-animationUsage
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@6/dist/swiper-animation.umd.min.js"></script>