swiper.js - How to add custom effects to the Swiper slider JavaScript library? - Stack Overflow

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 Follow edited Jan 10, 2019 at 19:18 Giao1968 26k1111 gold badges7676 silver badges105105 bronze badges asked May 17, 2017 at 9:09 miladfmmiladfm 1,5261313 silver badges2020 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

1. 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
      }
   }
   

2. 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