How to add custom effects to the Swiper slider JavaScript library?

Question

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?

Answer 1

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.com/nolimits4web/Swiper/issues/1497