angulartypescriptionic-frameworkionic4ion-slides

Ionic 4 IonSlides slideTo and getActiveIndex not working when used inside IonTab


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?


Solution

  • Turns out, the problem was caused by the slider being included in a Tab, solution found here