Custom navigation issues

[7iomka]

Check that this is really a bug

• I confirm

Reproduction link

https://stackblitz.com/edit/node-nqguhs?file=src%2Fshared%2Fui%2Fcarousel%2Fcarousel.component.tsx,src%2Fpages%2Fhome%2Fhome.component.tsx

https://node-nqguhs--3000.local.webcontainer.io/
Try it be resizing browser to width less than 400px to see issue.

Bug description

I have custom navigation buttons (custom means it is placed outside of Swiper component)
I configured it with recommendations from this post
We have different variations for slidePerView for some breakpoints.
The main goal is:

• when items.length > current slidesPerView - enable loop and show navigation
• when items.length <= current slidesPerView - disable loop (because we don't need duplicated items for example if a we have for example 4 items in row but actual is only 2 items in list) and also hide navigation

Expected Behavior

When loop is enabled, navigation also is updated and prev/next buttons is enabled to navigate.

Actual Behavior

When loop is enabled, navigation state is weird - only prev navigation is allowed
If you try to update navigation state, or destroy and init - only next navigation will be allowed.

Swiper version

8.2.4

Platform/Target and Browser Versions

All

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

[nolimits4web]

Swiper v9 comes with fully reworked and now different loop functionality. If you have similar issues in Swiper 9, open a new issue with a CodeSandbox showing the issue.