Loop and navigation stops working when `slidesPerView` is greater than the number of slides

[tdaved]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/s/swiper-infinite-loop-react-forked-kzp3hc

Bug description

The navigation and the loop features stop working when the slidesPerView number is greater than the number of slides. I manage to click the right arrow twice, but not more. The left navigation button works as expected.

Expected Behavior

When the loop property is true and the slidesPerView number is greater than the actual number of slides, the right button is clickable infinite times.

Actual Behavior

Let's say I have the intention to show 4 slides per view, and load the content dynamically into the swiper carousel. I can only load 3 slides, so the last slide will be my first slide duplicated. I click the left arrow 3 times and it loads the #3, #2, #1 slides correctly, but when I click the right navigation button 3 times, the navigation stops working after the second click.

Swiper version

8.3.2

Platform/Target and Browser Versions

Chrome 103.0.5060.134

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?

• [ ] I'm willing to open a PR

[benwallis]

Yes, this happens in the core version too

https://codesandbox.io/s/swiper-default-forked-btikxj?file=/index.html

[sonagi784]

it's cause the number of duplicate-slide is insufficient.

change 'loopedSlidesLimit' option to false. (default: true)

https://swiperjs.com/swiper-api#param-loopedSlidesLimit

[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.