Documentation for swiper plugin API

[linonetwo]

Currently, https://swiperjs.com/swiper-api page seems all about config parameters for swiper instance and what method you can call from an swiper instance, but it is actually also about swiper plugin API.

method

For example:

setTransition | (swiper, transition) | Event will be fired everytime when swiper starts animation. Receives current transition duration (in ms) as an arguments

means you can write setTransition as a method in your plugin:

const myPlugin = {
  setTransition(duration) {
    const swiper = this;
    swiper.slides
      .transition(duration)
      .find(
        '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left'
      )
      .transition(duration);
  },
};

And this method receive swiper as this, and transition as first argument.

swiper instance

method of your plugin will be called after swiper instanced, so you can get all things listed in https://swiperjs.com/swiper-api#methods-and-properties

const Coverflow = {
  setTranslate() {
    const swiper = this;
    const { width: swiperWidth, height: swiperHeight, slides, slidesSizesGrid } = swiper;
    const params = swiper.params.coverflowEffect;

But there can also be something not documented, like slidesSizesGrid, I don't know what it is...

And get your plugin's param from swiper.params.coverflowEffect just like in the effect-coverflow example js.

To make changes to the swiper dom elements, basically, you will need to get element via

const { slides } = swiper;

for (let i = 0, length = slides.length; i < length; i += 1) {
  const $slideEl = slides.eq(i);

  const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px)  rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(${scale})`;

  $slideEl.transform(slideTransform);
  $slideEl[0].style.zIndex = 1;

plugin provided methods

You can provide some methods for an end-user to use, for example, you want to add swiper.autoplay.start():

const Autoplay = {
  start() {
    const swiper = this;
    if (typeof swiper.autoplay.timeout !== 'undefined') return false;
    if (swiper.autoplay.running) return false;
    swiper.autoplay.running = true;
    swiper.emit('autoplayStart');
    swiper.autoplay.run();
    return true;
  },
};

other

I'm just starting reading code, so this is a WIP.

[linonetwo]

I was trying to solve #1928 , and I'm done now, proving that a plugin can do many things. Related threads #4632 #4644 #4646