循环播放时，离子滑块无法正确重置

Question

当通过滑块滚动时，所有内容均应正常工作，但是从最后一张卡滚动到第一张卡时，动画后第一张卡将无法正确重置。最后一张卡的一半仍会存在。

<div class="Categories">
<h3 class="padd-med-side slider-title">Featured</h3>
<ion-slides loop=true spaceBetween="16"  slidesPerView="2.2" class="small">
  <ion-slide>
    <ion-card (click)="goToListPage(outdoorsAttractions, 'outdoors')">
      <img src="../assets/imgs/icons/mountain.svg" />
      <div class="card-title-explore">Outdoors</div>
    </ion-card>
  </ion-slide>
  <ion-slide>
    <ion-card (click)="goToListPage(foodAttractions, 'food')">
      <img src="../assets/imgs/icons/cutlery.svg" />
      <div class="card-title-explore">Food</div>
    </ion-card>
  </ion-slide>
  <ion-slide>
    <ion-card (click)="goToListPage(cultureAttractions, 'culture')">
      <img src="../assets/imgs/icons/brush.svg" />
      <div class="card-title-explore">Culture</div>
    </ion-card>
  </ion-slide>
  <ion-slide>
    <ion-card (click)="goToListPage(shoppingAttractions, 'shopping')">
      <img src="../assets/imgs/icons/wallet.svg" />
      <div class="card-title-explore">Shopping</div>
    </ion-card>
  </ion-slide>
</ion-slides>

.small{
ion-card{
    background: $primary-color;
    height: 106px;
    width: 154px;
    border-radius: $sml;
    padding: $sml;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    margin-top: 8px;
    box-shadow: $drop-shadow;

  img{
    height: 40px;
    margin-bottom: $sml;
  }
}

}

当滚动回到“室外”时，“购物”卡右侧的部分仍会显示。 有人为什么会这样或如何解决吗？