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,
Can you explain what was the exactly error happened
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:
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?
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-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"/>
@ViewChild('mainslider') mainslider: Slides;