离子幻灯片向上滑动手势无法正常工作

Question

我正在尝试使用下面提到的代码在我的应用程序中使用离子滑动组件

<div class="d-flex flex-column h-100">
<div class="big-picture d-flex flex-column flex-1 w-100">
<ion-row no-padding class="w-100 h-100">
<ion-slides direction="vertical" #slides class="h-100">
<ion-slide *ngFor="let card of cardModel; let i = index">
<div swing-stack [stackConfig]="stackConfig" (throwoutleft)="voteUp(false, i)" (throwoutright)="voteUp(true, i)" class="h-100">
<sc-card orientation="x" class="d-flex flex-column w-100">
<div class="position-relative swipe-card d-flex flex-1">
<img src="{{card.bigPicture}}" class="w-100 h-100">
<div class="position-absolute justify-center d-flex align-center play-button play-button-background">
<ion-icon name="md-play" class="play-icon" style="color:white;"></ion-icon>
</div>
</div>
<ion-row class="details-row align-center">
<div col-8 class="d-flex flex-row align-center">
<ion-icon name="ios-eye" class="topic-text" item-start></ion-icon>
<span class="topic-text" style="font:1.4em;" (click)="openModalAlert()">{{card.because}} ...</span>
</div>
<div col-4 class="d-flex flex-column detail align-center justify-center">
<div class="d-flex flex-row" style="align-self:flex-end">
<span style="font-size: 12px;margin-right: 5px">Find @</span>
<img class="amazon-image" src="assets/imgs/amazon-image.png">
</div>
<span class="topic-price">${{card.price}}</span>
</div>
</ion-row>
</sc-card>
</div>
</ion-slide>
</ion-slides>
</ion-row>
</div>

<div padding>
Footer content
</div>
</div>

因此，恰好在应用程序运行时，第一张幻灯片会显示在适当的位置，但是一旦我向上滑动，下一张幻灯片的位置就会隐藏在屏幕标题的后面。

• 所有幻灯片的内容和高度都相同。

请帮助我解决此问题，我需要所有幻灯片在同一y位置向上滑动。

谢谢。