Multiple click event listeners on navigation elements when switching between Sveltekit pages

[tonprince]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/s/navigation-sveltekit-ctyin?file=/src/routes/index.svelte

Bug description

I have a simple Swiper with navigation elements on a page in Sveltekit. The navigation works fine when the component is initially loaded. But when you leave the page and return to the one with the Swiper element, the navigation elements get multiple click event listeners. From that moment on the navigation does not work as expected as there are multiple click handlers called which results in over jumping pages.

Expected Behavior

Destroying the Swiper component when leaving a page should clean up all listeners on the navigation elements.

Actual Behavior

Duplicated listeners are added and therefore the swiper navigation does not work properly after switching pages.

Swiper version

7.0.3

Platform/Target and Browser Versions

Firefox 91.0.2 (64-bit)

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[tonprince]

It seams when destroying the swiper instance the modules are not cleared. So anytime a new instance of swiper is created when loading the page the modules list is growing:

new Swiper(node, {
      modules: [Navigation],

[tonprince]

I found a workaround by setting the modules prototype to an empty array when destroying the swiper instance.

Swiper.prototype.modules = [];
swiper.destroy();

[tonprince]

Thanks for the fast bug fix, that solved the problem :-)