bug: multiple nested ion-slides not working [Github-Repo]

[conde2]

Bug Report

Ionic version:

[x] 5.2.1

Current behavior: When nesting multiple ion-slides using ngFor the slider does not work properly, it drag the slides back.

Expected behavior: Slide does not drag back.

Steps to reproduce: Go to tab 1 from the github repo or use the snippet

https://imgur.com/a/vsWEDgk

Related code:

GITHUB REPO SAMPLE:

https://github.com/conde2/ionic-slides-bug

<ion-content>
  <div *ngFor="let category of ['Title1', 'Title2', 'Title3'];">
    <div>{{category}}</div>

    <ion-slides>
      <div *ngFor="let data of ['Test 1', 'Test 2', 'Test 3', 'Test 4', 'Test 5', 'Test 6', 'Test 7', 'Test 8', 'Test 9', 'Test 10'];">

        <ion-slide>
          <ion-card>
            <ion-card-header>
              <ion-card-title>
                {{category}}
              </ion-card-title>
              <ion-card-content>
                <img src="https://via.placeholder.com/300x300">
                <ion-button>{{data}}</ion-button>
              </ion-card-content>
            </ion-card-header>
          </ion-card>
        </ion-slide>
      </div>
    </ion-slides>

  </div>
</ion-content>

Ionic info:

Ionic:

   Ionic CLI                     : 6.9.2 (/usr/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.2.1
   @angular-devkit/build-angular : 0.901.8
   @angular-devkit/schematics    : 9.1.7
   @angular/cli                  : 9.1.8
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : not installed
   @capacitor/core : not installed

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v14.2.0 (/usr/bin/node)
   npm    : 6.14.5
   OS     : Linux 5.6

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework.

You should only use ion-slide inside of ion-slides as immediate children. I removed the outer div, and the issue when away.

    <ion-slides>
      <ion-slide *ngFor="let data of ['Test 1', 'Test 2', 'Test 3', 'Test 4', 'Test 5', 'Test 6', 'Test 7', 'Test 8', 'Test 9', 'Test 10'];">
        <ion-card>
          <ion-card-header>
            <ion-card-title>
              {{category}}
            </ion-card-title>
            <ion-card-content>
              <img src="https://via.placeholder.com/300x300">
              <ion-button>{{data}}</ion-button>
            </ion-card-content>
          </ion-card-header>
        </ion-card>
      </ion-slide>
    </ion-slides>

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.