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>

Just added the template. The `slideLoad()` method is called on `ionSlidesDidLoad` — cVergel, Aug 26 '19 at 16:00
Just tried your code and it worked fine with just the `sliderOpts`, please reproduce the issue in a stackblitz. — AT82, Aug 27 '19 at 11:30
I am trying, but it gives me a 'can't find package core-js' error even though the package is clearly installed in the dependencies of the stackblitz... https://stackblitz.com/edit/ionic-r4kxkv — cVergel, Aug 27 '19 at 20:02

score 9 · Answer 1 · edited Nov 08 '21 at 22:51

9

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);

edited Nov 08 '21 at 22:51

Mario Petrovic

7,500
14
42
62

answered Oct 17 '19 at 06:25

YoungHyeong Ryu

929
7
9

1

Its work but when cahnge static to: `{static: false}` – El7or Dec 07 '19 at 12:02
how to do this in react? – oldmayn Jul 02 '20 at 20:01
still working on Ionic 5. You can also use `this.slides.slideNext()` if, like me, you just want to go to the next slide. – Antonio Correia Nov 08 '21 at 21:59

score 1 · Answer 2 · answered Aug 21 '20 at 04:48

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);

score 1 · Answer 3 · answered Aug 21 '20 at 16:40

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.

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

3 Answers3