Swiper 12 loop:true centeredSlides:true - swiper-slide-active ends up last in DOM with no next slide on second loop cycle

I'm using Swiper 12 with Angular 21 (swiper-element web components) and I have two synced carousels - one image carousel and one text carousel.

Setup

Both carousels:

slidesPerView: 1 loop: true

Image carousel extra:

centeredSlides: true overflow: visible (CSS) to show prev/next slides

Problem

On the first loop cycle everything works fine: [swiper-slide-prev] [swiper-slide-active] [swiper-slide-next]

On the second loop cycle the active slide ends up LAST in the DOM with nothing after it: [swiper-slide-next] [...] [swiper-slide-prev] [swiper-slide-active]

This means the next slide is not visible to the right of the active slide.

Code

Object.assign(swiperContainer.nativeElement, { slidesPerView: 1, loop: true, centeredSlides: true, speed: 500, }); swiperContainer.nativeElement.initialize();

html <swiper-container [init]="false" #swiperContainer> @for (slide of slides; track slide.id) { <swiper-slide>...</swiper-slide> } </swiper-container>

What I've tried

loopAdditionalSlides: 4 — same issue Duplicating slides manually (x3) — same issue on second cycle centeredSlidesBounds: true — same issue

Expected behavior

After swiper-slide-active there should always be a swiper-slide-next in the DOM regardless of which loop cycle we're on.

Is there a workaround?

private getSwiperImageProps$(): Observable<SwiperProps> { return this.carouselService.getParams({ slidesPerView: 1, effect: '', speed: 500, isLoop: false, isLazy: true, breakpoints: {}, // managed by css due to sync carousel needs same slidesPerView }); } private getSwiperTextProps$(): Observable<SwiperProps> { return this.carouselService.getParams({ slidesPerView: 1, effect: 'fade', fadeEffect: { crossFade: true, }, navigation: 'homepage-experiences', pagination: 'count-indicators', isLoop: false, isLazy: true, breakpoints: {}, }); }