Как сделать слайды одинаковой высоты в swiper вне зависимости от количества контента?

Рейтинг: 0Ответов: 2Опубликовано: 27.04.2023

Есть обычный слайдер c текстовыми слайдами. В каждом из них разное количество текста. Как сделать так, чтобы они все ровнялись по самому высокому и были его высоты?

const swiper = new Swiper('.swiper', {
  slidesPerView: 2,
  spaceBetween: 20,
});
.swiper-slide {
  padding: 20px;
  border: 2px solid #000;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
</head>

<body>
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis quis cum, iure neque ab quia ipsam hic, animi, dicta natus sit dignissimos! Alias quia, dolore placeat ipsa quae sint dolorem, quidem neque magni similique optio recusandae perferendis
        minima, fugit, sequi deserunt explicabo architecto incidunt in libero nesciunt repudiandae
      </div>
      <div class="swiper-slide">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis quis cum, iure neque ab quia ipsam hic, animi, dicta natus sit dignissimos! Alias quia, dolore placeat ipsa quae sint dolorem, quidem neque ipsum dolor, sit amet consectetur adipisicing
        elit. Officiis quis cum, iure neque ab quia ipsam hic, animi, dicta natus sit dignissimos! Alias quia, dolore placeat ipsa quae sint dolorem, quidem neque ipsum dolor, sit amet consectetur adipisicing elit. Officiis quis cum, iure neque ab quia
        ipsam hic, animi, dicta natus sit dignissimos! Alias quia, dolore placeat ipsa quae sint dolorem, quidem neque magni similique optio recusandae perferendis minima, fugit, sequi deserunt explicabo architecto incidunt in libero nesciunt repudiandae
      </div>
      <div class="swiper-slide">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis quis cum, iure neque ab quia ipsam hic, animi, dicta natus sit dignissimos! Alias quia, dolore placeat ipsa quae sint dolorem, quidem neque magni simil neque magni s neque magni s neque
        magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni
        s nequagni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque
        magni s neque magni s neque magni s neque magni s neque magni se magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque
        magni s neque magni s neque magni s neque magni s neque magni s neque magni sique optio recusandae perferendis minima, fugit, sequi deserunt explicabo architecto incidunt in libero nesciunt repudiandae
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
</body>

</html>

css javascript html swiper.js
Источник: Stack Overflow на русском

Ответы

▲ 3

Для .swiper-wrapper устанавливаете align-items: stretch;, а для .swiper-slide height: auto; - в таком случае .swiper-slide будет растягиватся по высоте самого высокого слайда.

const swiper = new Swiper('.swiper', {
  slidesPerView: 2,
  spaceBetween: 20,
});
@import url('https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css');

.swiper-wrapper {
  align-items: stretch;
}

.swiper-slide {
  height: auto;
  padding: 20px;
  border: 2px solid #000;
}
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis quis cum, iure neque ab quia ipsam hic, animi, dicta natus sit dignissimos! Alias quia, dolore placeat ipsa quae sint dolorem, quidem neque magni similique optio recusandae perferendis
      minima, fugit, sequi deserunt explicabo architecto incidunt in libero nesciunt repudiandae
    </div>
    <div class="swiper-slide">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis quis cum, iure neque ab quia ipsam hic, animi, dicta natus sit dignissimos! Alias quia, dolore placeat ipsa quae sint dolorem, quidem neque ipsum dolor, sit amet consectetur adipisicing
      elit. Officiis quis cum, iure neque ab quia ipsam hic, animi, dicta natus sit dignissimos! Alias quia, dolore placeat ipsa quae sint dolorem, quidem neque ipsum dolor, sit amet consectetur adipisicing elit. Officiis quis cum, iure neque ab quia
      ipsam hic, animi, dicta natus sit dignissimos! Alias quia, dolore placeat ipsa quae sint dolorem, quidem neque magni similique optio recusandae perferendis minima, fugit, sequi deserunt explicabo architecto incidunt in libero nesciunt repudiandae
    </div>
    <div class="swiper-slide">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis quis cum, iure neque ab quia ipsam hic, animi, dicta natus sit dignissimos! Alias quia, dolore placeat ipsa quae sint dolorem, quidem neque magni simil neque magni s neque magni s neque
      magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s
      nequagni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni
      s neque magni s neque magni s neque magni s neque magni se magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni
      s neque magni s neque magni s neque magni s neque magni s neque magni sique optio recusandae perferendis minima, fugit, sequi deserunt explicabo architecto incidunt in libero nesciunt repudiandae
    </div>
  </div>
</div>

▲ -1

По умолчанию слайдер Swiper имеет высоту в 100%, а сами слайды находятся во flex-контейнере и растягиваются на высоту родителя. Проблема в том, что это растяжение должно отталкиваться от каких-либо реальных (px, vh/vw, em...) значений, а не от абстрактных, коими являются проценты.

Задача решается простым добавлением высоты, или непосредственно слайдеру, или блоку в котором он расположен:

const swiper = new Swiper('.swiper', { slidesPerView: 2, spaceBetween: 20 });
.swiper { height: 90vh; }

.swiper-slide {
  padding: 20px;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 2px #000;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis quis cum, iure neque ab quia ipsam hic, animi, dicta natus sit dignissimos! Alias quia, dolore placeat ipsa quae sint dolorem, quidem neque magni similique optio recusandae perferendis
      minima, fugit, sequi deserunt explicabo architecto incidunt in libero nesciunt repudiandae
    </div>
    <div class="swiper-slide">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis quis cum, iure neque ab quia ipsam hic, animi, dicta natus sit dignissimos! Alias quia, dolore placeat ipsa quae sint dolorem, quidem neque ipsum dolor, sit amet consectetur adipisicing
      elit. Officiis quis cum, iure neque ab quia ipsam hic, animi, dicta natus sit dignissimos! Alias quia, dolore placeat ipsa quae sint dolorem, quidem neque ipsum dolor, sit amet consectetur adipisicing elit. Officiis quis cum, iure neque ab quia
      ipsam hic, animi, dicta natus sit dignissimos! Alias quia, dolore placeat ipsa quae sint dolorem, quidem neque magni similique optio recusandae perferendis minima, fugit, sequi deserunt explicabo architecto incidunt in libero nesciunt repudiandae
    </div>
    <div class="swiper-slide">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis quis cum, iure neque ab quia ipsam hic, animi, dicta natus sit dignissimos! Alias quia, dolore placeat ipsa quae sint dolorem, quidem neque magni simil neque magni s neque magni s neque
      magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s
      nequagni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni
      s neque magni s neque magni s neque magni s neque magni se magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni s neque magni
      s neque magni s neque magni s neque magni s neque magni s neque magni sique optio recusandae perferendis minima, fugit, sequi deserunt explicabo architecto incidunt in libero nesciunt repudiandae
    </div>
  </div>
</div>