I want to add a new custom effect to the Swiper slider JavaScript library.
The default Swiper effects are slide, fade, cube, coverflow or flip
but I want to add my custom effect with and all events. How can I do that?
I want to add a new custom effect to the Swiper slider JavaScript library.
The default Swiper effects are slide, fade, cube, coverflow or flip
but I want to add my custom effect with and all events. How can I do that?
javascript
swiper.js
Share
edited Jan 10, 2019 at 19:18
Giao1968
26k1111 gold badges7676 silver badges105105 bronze badges
asked May 17, 2017 at 9:09
miladfmmiladfm1,5261313 silver badges2020 bronze badges
Add a ment
|
1 Answer
1
Reset to default
6
Go to the s.effects object (Effects part) in swiper.js and add your own effect property like this:
myEffect: {
setTranslate: function() {
// your actual animation code goes here
},
setTransition: function( duration ) {
// duration is between 0 and max speed (300 is default)
// but you can change it in the config object below
// is called when your swiping starts and ends
}
}
To use your new effect do this:
var mySwiper = new Swiper( '.swiper-container', {
// other options …
// and add this
effect: “myEffect”
}
);
For more information have a look here:
https://github./nolimits4web/Swiper/issues/1497