I am encountering an issue with my ion slides setup on a page. Here is the code snippet:
<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>
Below is my component code:
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 issue I'm facing is that both the slideTo and getActiveIndex methods are not working as expected. I have tried waiting for the promises to resolve, but it doesn't seem to help. Can anyone assist me in understanding why?
UPDATE: I have noticed that my ionslide is nested inside an IonTab. When I directly place the slide outside the tab, everything functions correctly. Any thoughts on why tabs might be disrupting the slide functionality?