Ионный слайдер не сбрасывается должным образом при цикле

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;
  }
}

}

При прокрутке назад к «наружу» все еще будет отображаться немного правой стороны карточки «покупки». У кого-нибудь почему это происходит или как это исправить?