0

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?

allemattio
  • 1,836
  • 17
  • 33
  • Does the issue still exist if you set the slide `direction` to be horizontal instead of vertical? I noticed the vertical slide doesn't display anything useful for me and I have to use a a lot of css in order to style the markup into something that looks like what you're intending? – haron68 Feb 20 '20 at 02:32
  • 1
    @haron68 yes, I tryed now with the horizontal direction and removing all of the css, but the issue remains, I'm going crazy about this – allemattio Feb 20 '20 at 07:18

1 Answers1

0

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

allemattio
  • 1,836
  • 17
  • 33