Swiper 11 initialSlide problem

Ionic Framework Ionic Angular
1

I’m using Swiper 11 with Angular 17 and standalone components to create a gallery. The gallery works well, but I’m encountering an issue when trying to select a specific slide as the initial one in a fullscreen modal.

Here’s my setup:

In the parent component (“gallery”), I display images like this:

image
image523×460 54.1 KB

it works fine and i’ve made it like this:

  <swiper-container #swiperElement slides-per-view="1" speed="500" loop="false" scrollbar="false" class="py-2">
    <swiper-slide *ngFor="let item of items">

        <img [src]="item.itemSrc" style=" position: relative;" />
        <div class="fullscreen-icon-container">
          <img src="assets/icons/maximize.png" class="fullscreen-icon" (click)="openModal(swiperElement.swiper.realIndex)" />
        </div>
 
     
    </swiper-slide>
  </swiper-container>

When a user clicks on an image, I open it in a fullscreen modal. For this, I pass the slide index to the modal component.

In the modal component, I use another Swiper container:

    <swiper-container #swiperItem slides-per-view="1" speed="500" loop="false" scrollbar="false" class="py-2"
      initialSlide="currentSlideIndex">
      <swiper-slide swiperSlide *ngFor="let item of items" >
        <img [src]="item.itemSrc" style="cursor: pointer;" />
      </swiper-slide>
    </swiper-container>

Despite passing the slide index, the modal always shows the first slide. I suspect this happens because the Swiper container is already initialized when the modal opens. I’ve tried to initialize it from the modal.component.ts file, but I’m struggling to get it to work.

Could you suggest a solution?

thank you

2

ok i’ve found a solution.

in the component

  @ViewChild('swiperItem', { static: false }) swiperContainer: any;

ngAfterViewInit() {
    this.swiperContainer.nativeElement.swiper.slideTo(this.currentImageIndex, 0); // Move to the desired slide immediately
  }