Swiper Navigation Events Are Triggered Twice When Using Breakpoints

[corygottschalk]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/s/swiper-duplicate-navigation-event-bindings-mby46x?file=/index.html

Bug description

While conditionally enabling navigation in a breakpoint while disabling it on mobile results in slide navigation events being bound twice in the navigation module.

I narrowed the issue down to enable being called in /core/breakpoints/setBreakpoint.js and init being called in the init event handler in /modules/navigation/navigation.js.

I am unsure when this bug was introduced.

Expected Behavior

The slider should only advance one slide when clicking on a navigation button.

Only one event binding should be created for each navigation button during initialization.

Actual Behavior

The slider advances twice, skipping a slide.

Swiper version

8.4.5

Platform/Target and Browser Versions

macOS 12.6.1, arm 64, Google Chrome 108.0.5359.98,

Validations

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

Would you like to open a PR for this bug?

• [X] I'm willing to open a PR

[corygottschalk]

For anyone else experiencing this issue, I was able to add the below code to the config to clean up the event bindings in the meantime.

{
    on: {
        init(swiper: Swiper): void {
            swiper.navigation?.destroy();
            const breakpoint: string = swiper.getBreakpoint(swiper.params.breakpoints);
            const currentBreakpoint: SwiperOptions | undefined = swiper.params.breakpoints?.[breakpoint];
            const { navigation: currentBreakpointNavConfig } = currentBreakpoint || {};

            if (!currentBreakpointNavConfig) {
                return;
            }

            if (currentBreakpointNavConfig === true || currentBreakpointNavConfig?.enabled) {
                swiper.navigation.init();
                swiper.navigation.update();
            }
        },
    },
}

[Ricardo-Bonin]

I have the same problem.

[ghost]

Same here. Thank you for the fix @corygottschalk

[davetisyan95]

Had this problem with @ionic/react. Found that swiper.navigation module was getting initialized twice, creating two event listeners for the prev/next buttons. My workaround was to override the onInit method.

 onInit={(swiper) => {
        if (!!swiper.navigation) {
          swiper.navigation.destroy();
        }
      }}

[edtorba]

Can confirm, still happening in v9

[amrfateem]

Having the issue now in React. Not solved yet. still happening.

[amrfateem]

if (!!swiper.navigation) { swiper.navigation.destroy(); }

Your solution works great. I added it and used Patch-Manager to use it on my build. consider adding it as a fork so no one has this issue again

[POlczak-ITTouch]

I also see this (or very similar?) behavior with Swiper 11.0.6 while using Swiper Element (WebComponent) on Angular. Under the debugger it can be seen that initialize() is called by me only once, but navigation.mjs::init() fires twice and then each navigation click causes two onNextClick events...

It's pretty crazy that such issue remains open for so long.

[PimiTree]

Swiper Element native JS 11.1.1 version - the same behaviour - swipernavigationnext and swipernavigationprev - fires two times

[mkrauser]

I just had this issue. I've looked into it and the Navigation-Module is indeed initialized twice.

In our case this was the case, because we added the Navigation-Module to the modules within the swiper-config.

// this causes the error
new Swiper(sliderElement, {
    modules: [Pagination, Navigation],
    // ...
});

// this works
new Swiper(sliderElement, {
    modules: [],
    // ...
});

Navigation and Pagination are added by default to Swiper. If they are listed in modules, they are added again which causes this issue.