Multiple Swipers Interfering with Each Other on Navigation Buttons

[16muhammadhassan]

Check that this is really a bug

• I confirm

Reproduction link

https://scrubser-shop.com/

Bug description

I'm working on a Shopify project where I’ve implemented multiple Swiper instances on the homepage. To avoid conflicts, I've ensured that each Swiper has unique class names generated dynamically, and all Swiper variables are scoped separately.

However, I'm facing a strange issue:
When I click the "next" navigation button on the first Swiper, the "prev" button on the same Swiper gets correctly enabled — but the "prev" button of the second Swiper also becomes enabled, even though it hasn't been interacted with.

I've double-checked that:

Each Swiper instance has distinct classes.

Separate variables are used for each instance.

There’s no overlap in selectors or configurations.

Despite all this, the navigation states seem to be conflicting between sliders.

Has anyone faced this before, or is there something I'm missing?

Expected Behavior

In the first image, after clicking the "next" button on the first Swiper, the "prev" button on that slider becomes active — which is expected.
However, as shown, the "prev" button on the second Swiper also becomes enabled at the same time, even though that Swiper hasn’t been interacted with at all. This should not be happening.

For reference, here’s a second image showing that the buttons on each Swiper have different class names, generated dynamically to avoid conflicts:

And here’s another angle confirming the issue:

Despite the class names and variables being unique for each instance, the navigation state is somehow still being shared or conflicting between Swipers.

Actual Behavior

No response

Swiper version

11

Platform/Target and Browser Versions

Chrome

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

[franck-thorck]

👋

Try to set a different swiper class for each buttons of navigation of each sliders.

Example:

Where id is a unique identifier prefixed with - (e.g. -1234).

navigation: {
	nextEl: `.swiper-button-next${id}`,
	prevEl: `.swiper-button-prev${id}`
}

[16muhammadhassan]

Hi,
In Shopify, we typically use section.id to ensure unique identifiers for each section on the page. Since every section has a different section.id, it helps us avoid conflicts between duplicated components.

Here’s how I'm configuring navigation for the Swipers:

For the first slider:
navigation: {
nextEl: ".next-btn-{{ section.id }}",
prevEl: ".prev-btn-{{ section.id }}",
},

For the second slider:
navigation: {
nextEl: ".pro-next-{{ section.id }}",
prevEl: ".pro-prev-{{ section.id }}",
},

As you can see, the class names are unique per section, and I'm using different naming patterns (next-btn vs pro-next, etc.) to further ensure separation. Despite this, the navigation state is still getting shared between sliders.

Let me know if you'd like to see the full section or Swiper initialization code — happy to share!

[16muhammadhassan]

Hi @franck-thorck ,
Just following up on this — the issue is still occurring on my end. I've double-checked the implementation and everything appears to be correctly scoped with unique classes and variables, but the conflict between Swipers persists.

Any suggestions or insights you could share would be a huge help. Thanks in advance!