是否有可能在離子載玻片中將當前選定的載玻片居中？

Question

我有一個帶有孩子名字和頭像的滑塊。 一旦用戶點擊特定的孩子，它就會在頭像上方添加編輯按鈕。 滑塊 我想要實現的是在用戶單擊活動幻燈片時將其居中。

斯迪爾

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

主頁.scss

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

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