slideToClickedSlide + centeredSlides + loop breaks the loop when sliding to clicked slide

[wagnero11]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/devbox/swiper-react-infinite-loop-forked-tzdj6h?embed=1&file=%2Fsrc%2FApp.jsx

Bug description

When clicking on a slide sometimes either the left or right part of the slides glitches or sometimes show blank slides but this cannot be true as loop is set to true, on my local machine left slides work fine but when clicking on right ones only one works and the next after that is empty. It appears back if I slide or navigate to the next slide. I'm not sure what seems to be the issue or if I am doing something wrong, I've real several existing closed issues saying to use loopAdditionalSlides but I keep getting a message saying Swiper Loop Warning: The number of slides is not enough for loop mode.

EDIT: it is also not working on Core / API, here with swiper 11 you can see the issue with the slides on the right, slide to click only works for two of the slides then its blank:
https://codesandbox.io/p/sandbox/swiper-infinite-loop-forked-59yjh3?file=%2Findex.html%3A10%2C31

Expected Behavior

When clicking on a slide it takes me to the clicked slide

Actual Behavior

When clicking on a slide it breaks the loop or shows empty prev/next slides. Bug better seen if only used slideToClickedSlide and not the navigation arrows or dragging of slides.

Swiper version

10.0.0

Platform/Target and Browser Versions

macOS Chrome V 123.0.6312.124

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

[ilyasselharak]

hello yes i got this bug , and like this how you fix it
this because the order of .swiper-slide-prev and swiper-slide-visible and swiper-slide-next inside .slide-wrapper,
so when using the navigation button next and loop (true) the order will be
<--?div class="swiper-wrapper flex">
<--?div class="swiper-slide-next">nextSlide
<--?div swiper-slide-prev">prevSlide
<--?div class="swiper-slide-visible">visibleSlide

and it should be always in order like the following <--?div class="swiper-wrapper flex"> <--?div swiper-slide-prev">prevSlide <--?div class="swiper-slide-visible">visibleSlide <--?div class="swiper-slide-next">nextSlide

[wagnero11]

@ilyasselharak do you mean there is a fix? Sorry, I am confused by your comment

[ilyasselharak]

@wagnero11 yes, there's solution i mean when click on next button navigation the order of 3 div whithin the swiper-wrapper got unorder started by .swipe-slide-next and it should be .swipe-slide-prev first then .swipe-slide-visible then .swipe-slide-next.

the problem only when using navigation with loop,

so some how just render the three divs order .

unorder divs

and it should be like this order
order div

[spacedragn]

Can confirm, I’m also experiencing this issue. Using v11 Core/API, not doing anything out of the ordinary with settings.

https://capture.dropbox.com/d52x6a1HTNSC8JkC

[hipig]

Add configuration:
loopAdditionalSlides=1