Virtual SwiperJs Slides in Angular 17 not working

In my Angular 17 application, i have a page rendering vertical virtual (virtual='true') swiper slides, showing some images.

After migrating Swiper from v8 to v11 (migrating to SwiperElements) the swiper-container virtual functionality is not working anymore, while using a non virtual approach is working correctly.

I think this is related to how the data is handled, but i can't find any documentation online.

Anyone can suggest me any solutions or tell me if my approach to virtual slides is wrong?

Here is my component's html code:

<ng-template #content>
<div *ngIf="isMobile" class="h-full w-full relative">
<!-- TODO how to enable virtual slides???????? -->
<swiper-container slides-per-view="1" preload-images="false" space-between="0" resistance-ratio="0"
direction="vertical" virtual="false" class="h-full w-full" id="swiper-container-main">
<swiper-slide *ngFor="let myItem of myItems; trackBy: trackById" class="flex justify-center">
<app-mobile-item-card [myItem]="myItem"></app-mobile-item-card>
</swiper-slide>
</swiper-container>
</div>
</ng-template>


and this is how i retrieve my data:

private getItemsPaged = () => {
this.myService.getPagedItems(this.loadedIndex)
.pipe(
takeUntil(this.onDestroy$),
map(myItems=> {

if(!myItems) {
return;
}

this.myItems.push(...myItems)
this.loadedIndex++;
this.loading = false;
}),
catchError(error => {
console.debug(error)
this.errorHappened = true
this.loading = false;
return EMPTY;
})
).subscribe();
}


In my ngOnInit i have:

ngOnInit(): void {
...
getItemsPaged();
...
}


I also have a method to detect if more slides needs to be added (infinite-scroll like):

onSlideChange(event) {
let actualSlideIndex = event[0].activeIndex
let direction = event[0].swipeDirection
let currentItem = this.myItems[actualSlideIndex];
if (actualSlideIndex == this.myItems.length - 3 && direction == "next") {
this.getItemsPaged();
}
}

Continue reading...