Ion-slides nested with another ion-slides caused pager trigger both ion-slides

Ionic Framework ionic-v3
1

I have set ion-slides and nested with another ion-slides inside and the pager for second ion-slides trigger first ion-slides as well

2

This is an issue with the way Ionic implemented ion-slides.
The variables for a slide are global and thus things get weird when adding multiple ion-slides on the same page.
This is a PR that solves this issue: https://github.com/ionic-team/ionic/pull/11791

If you don’t want to do this: you can use the Swiper-library (which ion-slides uses internally) to get the same result.

3

You can try the following for nested ion-slides:
<ion-slides [options]=“options” (ionSlideWillChange)=“ionSlideWillChange($event)”>…
In .ts file:
ionSlideWillChange(event: Event) {
event.stopPropagation();
}