在 Swiper 轮播组件中，如何显示高度相同的所有图片

Question

在 Swiper 轮播组件中，如何显示高度相同的所有图片

6

我正在使用Swiper脚本在网站上展示包含横向和纵向照片的滑块，并且我想知道是否可以设置一个特定的最大高度，以便所有图片都具有相同的高度并保持其宽高比。我知道Swiper有一个height参数，但我尝试了一下，貌似没有任何区别。而且，我也尝试在.swiper-wrapper类或其中的图像 .swiper-slide > img 上设置max-height，但是图像要么被剪裁，要么变形。

有什么好的建议吗？

谢谢。

var swiper = new Swiper( '.swiper-container', {
    initialSlide: 0, 
    loop: true,
    autoHeight: true,
    height: 200,
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

- leemon

你尝试过使用min-height属性设置图像属性吗？ - SajZ

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jismon Thomas · Accepted Answer

最简单的解决方案是在 swiper-slider 中添加 height: auto，并将内部内容的height: 100%。

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'horizontal',
  slidesPerView: "auto",
   centeredSlides: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

.swiper {
  width: 600px;
  height: 100%;
}

.swiper-slide {
background-color: grey;
height: auto !important;
text-align: center;
}
.swiper-content {
height: 100% !important
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
    <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
  </head>
  <body>
    <main>
        <div class="swiper">
          <!-- Additional required wrapper -->
          <div class="swiper-wrapper">
            <!-- Slides -->
            <div class="swiper-slide">
              <div class="swiper-content">
                <p>Slide 1 Content</p>
                <p>Slide 1 Content</p>
                <p>Slide 1 Content</p>
                <p>Slide 1 Content</p>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="swiper-content">
                <p>Slide 2 Content</p>
              </div>
            </div>
            <div class="swiper-slide medium-content">
              <div class="swiper-content">
                <p>Slide 3 Content</p>
                <p>Slide 3 Content</p>
              </div>
            </div>
            ...
          </div>
          <!-- If we need pagination -->
          <div class="swiper-pagination"></div>

          <!-- If we need navigation buttons -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>

          <!-- If we need scrollbar -->
          <div class="swiper-scrollbar"></div>
        </div>
    </main>
    <script src="index.js"></script>
  </body>
</html>