Loop mode leaves empty space after the last slide

[Yaro77]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/sandbox/swiper-centered-forked-hxxxwj?file=%2Findex.html%3A87%2C27

Bug description

How to get rid of empty space after the last visible slide? Forked "infinite loop" example.

Expected Behavior

No empty space, Next slide renders.

Actual Behavior

Empty space. Last visible slide is actually the last child of .swiper-wrapper in the DOM.

Swiper version

swiper@11

Platform/Target and Browser Versions

windows 11, chrome 126.0.6478.63

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]

t0ggles-create swiper

[t0ggles]

Task nolimits4web/SWIPER-143 was created

[shaobeichen]

I met same question，I used swiper 11 web component

[shaobeichen]

I find a temp method, I observed call swiper.loopFix can resolve it in swiperslidechange method, but can't use it in swiperslidechange, because it would recursion, so I use loopFix in watch effect，watch effect have cache, so it can avoidance recursion.

[shaobeichen]

@Yaro77

[michaelbourne]

Can confirm on my end too. Any combination with loop: true and centeredSlides: true will cause this.

[t0ggles]

Task nolimits4web/SWIPER-143 status changed to Done

[0x74h51N]

Hello @nolimits4web,

Unfortunately, the 11.1.9 update caused this issue in my Next.js project. I've tried different approaches but couldn't fix it. When I manually move the slides, it creates a space or causes the first slide to disappear. I also tested different versions, and 11.1.8 is very stable for me. Any suggestions on how to resolve this?

Thank you.

[will-yellowpeach]

I'm still getting this issue. Presumably still a known problem?

[0x74h51N]

I figured it out after reviewing 11.1.9 update related change. It's about the slides' length. For example, if you show 4 slides per view (centered & loop) and the total length is 5, it will cause empty space after the last slide. You can fix it by duplicating the slides. @will-yellowpeach

[will-yellowpeach]

We've got 'slidesPerView' set to 'auto' but have duplicated the number of items x3 to ensure that it's not a number of slides issue, but it still persists - video here: https:/user-attachments/assets/424f07bd-b827-4af4-b821-671d74e720d7

It seems to occur any time we use centeredSlides: true and loop:true together. If we set centeredSlides to false, the issue goes away and it handles it fine

[0x74h51N]

I just figured out my issue with the length, but which version are you using? There’s another fix related to loop in the 11.1.10 update, but I’m not sure if it’s connected to this. Good luck..

[hipig]

This issue exists throughout the entire v11 version, why haven't we seen any fixes

[michaelbourne]

I haven't had this problem since v11.1.11. Do any of you have a sandbox with the latest Swiper version where this can be replicated?

[dngraphisme]

Why is this issue closed @nolimits4web ? Loopmode on V11 is really complicated... I have exactly the same problem and can't patch it correctly....