How to develop swiper plugin?

[linonetwo]

I'm going to make a plugin similar to https://github.com/nolimits4web/swiper/blob/master/src/components/effect-coverflow/effect-coverflow.js and solve #1928

But how to dev it locally and see changes? There is no an API to pass plugin to the swiper instance, so how to let it know we want it to load the effect-coverflow.js ?

[nolimits4web]

Setup any env you know, e.g. web pack, Vite, rollup, etc. Install swiper (npm i swiper), create a new plugin file (probably based on Coverflow.js)

import Swiper from 'swiper'
import myPlugin from './path/to/myplugin.js';

Swiper.use([myPlugin]);

new Swiper(...);

[linonetwo]

I can see basically internal elements are "Dom7 element", I believe they are created by $ from import $ from '../../utils/dom'; as how effect-coverflow.js is doing.

If I don't have access to the internal dom methods, how to do something like this?

$shadowBeforeEl = $(
            `<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`,
          );

And I won't be able to do

         create() {
            const swiper = this;
            bindModuleMethods(swiper, {
              coverflowEffect: {
                ...Coverflow,
              },
            });

[linonetwo]

Can you expose dom utils and bindModuleMethods for plugin developers? If I'm going to PR them into your repo, I will refactor them back to relative import.

[nolimits4web]

If I don't have access to the internal dom methods, how to do something like this?

const el = document.createElement('div');
el.classList.add(`swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}`)

[linonetwo]

OK, got it, they don't need to be "Dom7 element". And for bindModuleMethods, I think I can just copy the function code to my side. But it's better that swiper can export them somehow.

[nolimits4web]

That helper is also not needed, what it does is swiper.myPlugin.someMethod = myPlugin.someMethod.bind(swiper)