У меня есть этот огромный пробел после моего ионного слайда

Question

Я создал карту слайдов с пользовательским компонентом, где я инициализирую ионные слайды.

Это выглядит так:

<!-- Generated template for the RestaurantSlideCardComponent component -->
<ion-slides (ionSlideReachEnd)="ionDidSlideReachEnd()">
  <ion-slide *ngFor="let restaurant of restaurants"
     [routerLink]="'/restaurant/' + restaurant.Restaurant._id" routerDirection="forward" detail="true">

    <ion-card class="xs-margin">
        <img [attr.src]="restaurant?.picture ? restaurant.picture : 'https://via.placeholder.com/200x100?text=Restaurant'">
        <ion-card-content class="xs-padding-v padding-h">
            <mm-label>{{ restaurant.Restaurant.Name }}</mm-label>

            <mm-star-rating [rating]="4.5"></mm-star-rating>

            <div class="info-list xs-margin-t">
                <p>{{ restaurant.Restaurant.Distance }} KM away {{ restaurant.city }}</p>
                <p [ngClass]="{'closed': restaurant.label === 'closed', 'open': restaurant.label === 'open'}">
                    {{ restaurant.label }} untill 00:00
                </p>
            </div>
        </ion-card-content>
    </ion-card>
</ion-slide>

Но после инициализированных слайдовпользователь может скользить бесконечно вправо, контент исчезнет.У кого-нибудь есть такая же проблема?Как мне остановить этот бесконечный удар?

Если вы проведете пальцем влево, он остановится на первом слайде, но наоборот не будет работать.