admin管理员组

文章数量:1202790

I'm using the Swiper script to show a slider with a mix of landscape and portrait photos on a site and I was wondering if it's possible to set a specific max height so all images have the same height respecting their aspect ratio. I know that there is a height parameter on Swiper but I tried it but it doesn't seem to make any difference. Also, I tried to set a max-height on the .swiper-wrapper class or the images inside it .swiper-slide > img but the images are either clipped or distorted.

Any ideas?

Thanks

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',
    },
});

I'm using the Swiper script to show a slider with a mix of landscape and portrait photos on a site and I was wondering if it's possible to set a specific max height so all images have the same height respecting their aspect ratio. I know that there is a height parameter on Swiper but I tried it but it doesn't seem to make any difference. Also, I tried to set a max-height on the .swiper-wrapper class or the images inside it .swiper-slide > img but the images are either clipped or distorted.

Any ideas?

Thanks

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',
    },
});
  • javascript
  • css
  • slider
  • swiper.js
Share Improve this question edited Mar 19, 2021 at 10:37 leemon asked Mar 19, 2021 at 9:45 leemonleemon 1,0615 gold badges24 silver badges50 bronze badges 1
  • have you tried to set the image property with min-height ? – SajZ Commented Mar 20, 2021 at 10:10
Add a comment  | 

1 Answer 1

Reset to default 20

The easiest solution would be adding height: auto to the swiper-slider and height: 100% to the content inside.

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>

本文标签： javascriptDisplay all images with the same height in a Swiper sliderStack Overflow

版权声明：本文标题：javascript - Display all images with the same height in a Swiper slider - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738653603a2105016.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。