I have a ion slides in a page like this:
<ion-slides #schemasliderref [options]="schemaSliderOpts" (ionSlideDidChange)="slideChange()">
<ion-slide *ngFor="let schemaImage of schemaImages; let i = index">
<img [src]="schemaImage.url">
</ion-slide>
</ion-slides>
And this is my component:
export class TabSchemes implements OnInit {
public schemaImages = [
{
url: 'some url',
label: 'Immagine 1 Immagine 1 Immagine 1 Immagine 1 Immagine 1 Immagine 1 Immagine 1 Immagine 1 Immagine 1 Immagine 1 Immagi'
},
{
url: 'some url',
label: 'Immagine 2'
},
{
url: 'some url',
label: 'Immagine 3'
}
];
public schemaSliderOpts: any = {};
public schemaSliderActiveIndex = 0;
@ViewChild('schemasliderref', {static: false}) schemaSliderRef: IonSlides;
ngOnInit() {
this.schemaSliderOpts = {
initialSlide: this.schemaSliderActiveIndex,
speed: 400,
direction: 'vertical'
};
}
onSchemaLabelClick(slideIndex) {
this.schemaSliderRef.slideTo(slideIndex);
this.schemaSliderActiveIndex = slideIndex;
console.log('label click ' + slideIndex);
}
slideChange() {
console.log('slide changing');
this.schemaSliderRef.getActiveIndex().then((index) => {
this.schemaSliderActiveIndex = index;
console.log('slide change ' + index);
});
}
}
The problem is that neither the slideTo and the getActiveIndex method works, I also tried waiting for the catch of the promises but nothing occurres. Can someone help me figure out why?
UPDATE: My ionslide is inside a IonTab. I’ve tryied inserting directly the slide in the page without the tab and everything works fine. Any idea why the tabs break the slide?
Turns out, the problem was caused by the slider being included in a Tab, solution found here