Есть ли возможность центрировать выбранный слайд по ионам?

Question

У меня есть слайдер с именем и аватаркой детей. Когда пользователь нажимает на указанную c kid, он добавляет кнопку редактирования над аватаром. Слайдер То, чего я пытаюсь добиться, это центрировать активный слайд, когда пользователь нажимает на него.

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 к файлу s css страницы.

.slider-wrapper {height: 100%;}

home.s css

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

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