Как сделать в сладере позиционирование текстового блока на одном уровне?

Question

sr3d4cs @sr3d4cs

Как сделать в сладере позиционирование текстового блока на одном уровне?

Добрый вечер!

Суть вопроса заключается в том, чтобы разместить текстовый блок на одной высоте относительно верхнего края слайда, как на скриншоте примерных слайдов ниже:

HTML код:

<ion-content>
  <swiper-container #swiper (afterinit)="swiperReady()" [pagination]="true">
    <swiper-slide>
      <img src="assets/images/onboarding_1.png" class="slide-image">
      <div class="slide-content">
          <h2>Комплексная поддержка при раке груди</h2>
          <p>Благотворительный пакет помощи на 360 дней - бесплатно. Доступ к вебинарам, курсам и онлайн-встречам с опытными врачами и поддерживающими специалистами.</p>
      </div>
      <ion-button size="large" (click)="goNext()">
        Далее
        <img src="assets/icons/chevron-right.svg" slot="end"/>
      </ion-button>
    </swiper-slide>
    <swiper-slide>
      <img src="assets/images/onboarding_2.png" class="slide-image">
      <div class="slide-content">
          <h2>Доказательная информация из проверенных источников</h2>
          <p>Врачи более 10 лет в практике. Более 9000 пациентов успешно прошли путь выздоровления.</p>
      </div>
      <ion-button size="large" (click)="goNext()">
        Далее
        <img src="assets/icons/chevron-right.svg" slot="end"/>
      </ion-button>
    </swiper-slide>
  </swiper-container>
</ion-content>

CSS:

swiper-container {
    --swiper-pagination-color: #5638cb; /* Цвет активного буллета */
    --swiper-pagination-bullet-inactive-color: #E4E2EE; /* Цвет неактивного буллета */
    --swiper-pagination-bullet-inactive-opacity: 1;
    width: 100%;
    height: 100%;
  }
  
  swiper-slide {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
  }
  
  .slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Обеспечивает покрытие всего слайда без искажения */
    z-index: -1; /* Помещает изображение под текстовый контент */
  }
  
  .slide-content {
    z-index: 1; /* Убедитесь, что текстовый контент находится над изображением */
    color: white; /* Для лучшей видимости на темном фоне */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
  }
  
  .slide-content h2 {
    color: #5639cb;
    font-weight: 500;
    font-family: Ubuntu, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
      'Liberation Sans', sans-serif;
    font-size: 24px;
  }
  
  .slide-content p {
    color: #4d4b53;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    font-family: Ubuntu, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
      'Liberation Sans', sans-serif;
  }
  
  ion-button {
    --background: linear-gradient(to right, #7433a8 0%, #3733ba 105.37%);
    --border-radius: 32px;
    --box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    --background-activated: linear-gradient(to right, #5a278b 0%, #2a278b 105.37%);
    --box-shadow-activated: 0 2px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    /* identical to box height, or 133% */
    text-align: center;
    letter-spacing: 0.2px;
  }

Я сделал позиционировали блоков с помощью Flexbox и прижал текстовый блок к нижнему краю. Соответственно из-за разной высоты текста получается, что весь блок имеет разную высоту.