How to tell ion-slides what slide to show (slideTo)

Question

I have a modal containing an ion-slides element. In the main page I have the thumbnails of the images that on (click) open the modal with the slider. I need to have the slider slideTo the slide with the index of the thumbnail selected, and haven't gotten it working yet.

I have accomplished passing the right index to the modal and verifying it logging to the console. In the ionic 4 docs , we are directed to the swiper docs , where one can see the slideTo method exists, but I just don't know how to use it when the slider was initialized by ionic. I followed a tutorial to get the modal and slider going and everything works great except for opening the slider at the right slide. I have tried in many ways to follow the swiper docs. Also, the array of thumbnails and the array of images for the slider are identical, so the indexes match.

Here the ts file for the modal/slider:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { NavParams, ModalController } from '@ionic/angular';

@Component({
  selector: 'app-zoom-modal',
  templateUrl: './zoom-modal.component.html',
  styleUrls: ['./zoom-modal.component.scss'],
})
export class ZoomModalComponent implements OnInit {

  images: any;
  index: number;
  img: any;

  @ViewChild('slider', { static: false })slider: ElementRef;

  sliderOpts = {
    zoom: {
      maxRatio: 3,
    },
    slideTo: this.index // doesn't work
  };

  constructor(private navParams: NavParams, private modalController: ModalController) { }

  ngOnInit() {
    console.log(this.index);
  }

  zoom(zoomIn: boolean){
      let zoom = this.slider.nativeElement.swiper.zoom;
      if (zoomIn) {
        zoom.in();
      } else {
        zoom.out();
      }
  }

  close() {
    this.modalController.dismiss();
  }

  slideLoad(){
     let modelslider = this.slider.nativeElement.swiper;
     modelslider.slideTo(this.index); // doesn't work
  }

}

Screenshot of the method in the docs:

Template:

<ion-content fullscreen>
  <ion-slides [options]="sliderOpts" (ionSlidesDidLoad)="slideLoad()" (ionSlideDidChange)="slideChange()" #slider>

    <ion-slide *ngFor="let img of images; let i = index">
      <div class="swiper-zoom-container">
      <img src="{{ img.url }}" />
      </div>
    </ion-slide>

  </ion-slides>

  <ion-toolbar fixed>
    <div id="modal-button-wrap">
    <ion-button (click)="close()" id="modal-close" class="clear">
      <ion-icon name="close"></ion-icon>
    </ion-button>
    <ion-button (click)="delete()" id="modal-edit">
        <ion-icon name="create"></ion-icon>
        <ion-label>&nbsp;&nbsp;EDIT PHOTO</ion-label>
      </ion-button>
    <ion-button (click)="delete()" id="modal-delete" class="clear">
      <ion-icon name="trash"></ion-icon>
    </ion-button>
  </div>
  </ion-toolbar>
</ion-content>

Answer 1

in Template

<ion-slides #slides>
-----
</ion-slides>

in Component

import { IonSlides } from '@ionic/angular';

@ViewChild('slides', {static: true}) slides: IonSlides;

this.slides.slideTo(your slidenumber);

Answer 2

I was confused about slideTo method in ionic 4 docs like you.

I found the usage. I just describe the usage based on your code:

Template

<ion-slides #slider>
    <ion-slide *ngFor="let img of images; let i = index">
      <div class="swiper-zoom-container">
      <img src="{{ img.url }}" />
      </div>
    </ion-slide>
</ion-slides>

TS file

import { IonSlides } from '@ionic/angular';

@ViewChild('slider', { read: IonSlides }) slider: IonSlides;

...

// You can use slideTo method here with your slide index (number), the slide index must be a number
this.slider.slideTo(slideIndex);

Answer 3

Since you are using the ion-slides inside a modal and modals get instantiated and destroyed, depending on your case you might want to consider just using "initialSlide" parameter instead of slideTo approach:

slideOpts = {
    initialSlide: 2,
    speed: 400
};

slideTo is a method and essentially in your case inside of your modal the slides component gets initialized with default initialSlide (since you are not using this property) and then it has to navigate to a particular slide. By using initialSlide you just make your slides component init exactly where you need it to.