How to use an ion-Infinite-scroll inside an ion-slide on Ionic 5

Question

I am trying to make in my project a slide that loads the items coming from an API of 5 in 5, but when adding the ion-Infinite-scroll component inside the ion-slide it is not called when sliding sideways. Currently on the screen contains two slide the first shows the highlights items and the second list all the items, but I do not want you to load everything at once, because it will be a lot of data to be loaded, so the idea and the items are loaded 5 by 5.

follows my HTML below:

<ion-content [fullscreen]="true" class="ion-padding">

  <div class="toolbar" *ngIf="!permission">
    <ion-buttons slot="end">
      <p>Find</p>
      <ion-button (click)="presentAlertConfirm()">
        <ion-icon class="icon_logout" name="log-out-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
  </div>

  <hr *ngIf="!permission" width=“2” size=“100”>

  <h2>Destaques <ion-icon (click)="toTheListOfPremiumCompanies()" name="arrow-forward-outline"></ion-icon>
  </h2>

  <ion-grid>
    <ion-row>
      <ion-col size="12">
        <ion-slides pager="true" [options]="slideOptsOne" #slideWithNav
          (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
          <ion-slide *ngFor="let s of sliderOne?.slidesItems" (click)="toCompany(s.sales?.company?.id)">
            <img src="{{s.sales?.company?.image}}">
          </ion-slide>
        </ion-slides>
      </ion-col>

    </ion-row>
  </ion-grid>

  <h5>Ver todos <ion-icon (click)="toTheListCompaniesAll()" name="arrow-forward-outline"></ion-icon>
  </h5>

  <ion-grid>
    <ion-row>
        <ion-col>
          <ion-slides pager="false" [options]="slideOptsTwo" #slideWithNav2
            (ionSlideDidChange)="SlideDidChange(sliderTwo,slideWithNav2)">
            <ion-slide *ngFor="let s of sliderTwo?.slidesItems" (click)="toCompany(s.id)">

              <ion-card class="style_card">
                <img src="{{s?.image}}" />
                <ion-card-content>
                  {{s?.name}}
                </ion-card-content>
              </ion-card>

            </ion-slide>

            <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
              <ion-infinite-scroll-content loadingSpinner="bubbles">
              </ion-infinite-scroll-content>
            </ion-infinite-scroll>

          </ion-slides>
        </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>