是否有可能在离子载玻片中居中选择弯曲的载玻片？

Question

我有一个带有孩子名字和头像的滑块。用户点击特定的孩子后，会在头像上方添加编辑按钮。滑块我要实现的目标是一旦用户单击活动幻灯片，就将其居中。

Sldier

<ion-slides #slides centeredSlides="true" slidesPerView="3" paginationType="bullets"
            (ionSlideWillChange)="onSlideChanged()">
            <ion-slide *ngFor="let child of children">
                <div *ngIf="child.firstname === selectedChild" class="children__avatar-edit">
                    <ion-icon name="create"></ion-icon>
                </div>
                <span (click)="selectChild(child.firstname)"
                        [ngClass]="child.firstname === selectedChild ? 'children__avatar children__avatar--active' : 'children__avatar'">{{child.avatar}}</span>
                <p class="children__name">{{child.firstname}}</p>
            </ion-slide>
  </ion-slides>

我已经准备了一些演示文件，以更好地演示它。最初，孩子将来自API。

https://stackblitz.com/edit/slides-example

Answer 1

将下面的css添加到页面scss文件。

.slider-wrapper {height: 100%;}

home.scss

page-home {
  .slider-wrapper {
    height: 100%;
   }
  .children {
    &__avatar {
      font-size: 2rem;

      &--active {
        font-size: 3rem;
      }
    }
  }
}