CODEWITHSUNDEEP
javascriptcsssliderswiper.js
leemon
leemon

Reputation: 1081

Display all images with the same height in a Swiper slider

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

Upvotes: 7

Views: 35424

Answers (1)

Jismon Thomas
Jismon Thomas

Reputation: 893

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>

Upvotes: 20

Related Questions