Ion-slides swiper API 'control' property does not exist on type 'Slides'

Ionic Framework ionic-v3
1

Hello, I’m trying to create an image slider with thumbnail controls underneath using ion-slides with swiper API custom options.

The swiper documentation (http://idangero.us/swiper/api/#.WK_adxKLSLI) says to use two sliders and set the ‘control’ property of one slider to the other.

Simple enough, but TypeScipt tells me: 'Property ‘control’ does not exist on type ‘Slides’

Might this be included in the Slides component soon? Does anyone know of any workarounds until then?

Thanks in advance,

James

2

Hi, @JamesBenns

Can you explain what was the exactly error happened

3

Hey @vd_virani,

Yes, I get my swiper instances like this:

    @ViewChild('mainslider') mainSlider: Slides; 
    @ViewChild('thumbnails') thumbnails: Slides;

And set the options after view init like this:

        ngAfterViewInit() {
           this.thumbnails.freeMode = true;
           this.thumbnails.control = this.mainSlider;
        }

Now, the swiper has freeMode enabled but TypeScript tells me that: 'Property ‘control’ does not exist on type ‘Slides’.

I guess this feature of swiper just hasn’t been ‘ionised’ yet… What do you think?

4

Incase anyone has a similar issue, this is how I overcame it - It’s not as fully featured as the original swiper API control, but exactly what I needed.

I just created a function that slides the mainslider to the image you clicked on, so HTML:

  <ion-slides #mainslider style="height: initial;">
      <ion-slide *ngFor="let image of product.images">
          <img style="padding: 15px;" [src]="image"/>
      </ion-slide>
  </ion-slides>
  <ion-slides #thumbnails style="height: 100px;">
      <ion-slide (click)="slideTo(i)" style="width: 100px;" *ngFor="let image of product.images; let i = index">
          <img style="padding: 5px; height: 100px;" [src]="image"/>
      </ion-slide>
  </ion-slides>

And JS:

@ViewChild('mainslider') mainslider: Slides;

slideTo(index){
  this.mainslider.slideTo(index);	
}
1 Like