Swiper Js Slider – Images overlapping in fix…

Desire output: I am trying to implement a slider with a fixed height and auto width. The images should be adjusted to e.g. height: 800px and the width should be true to the image resolution.

My Implementation: https://playground-f2831f.webflow.io/model-images/provident-at-sunt-incidunt How it is supposed to be: https://artworld.agency/artists/sarah-bassett

My slider param:

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script> 
<script>
$(".swiper").append(`<div class="swiper-scrollbar"></div>`);
$(".swiper").append(`<div class="swiper-pagination"></div>`);
$(".swiper").append(`<div class="swiper-arrow button-prev"></div>`);
$(".swiper").append(`<div class="swiper-arrow button-next"></div>`);

const swiper1 = new Swiper(".swiper", {
  // Optional parameters
  slidesPerView: 'auto',
  centeredSlides: false,
  speed: 1500,
  loop: false,
  simulateTouch : true,
  loopFillGroupWithBlank: false,
  grabCursor: true,
  direction: "horizontal",
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 480px
    480: {
      slidesPerView: 1
    },
    // when window width is >= 768px
    768: {
      slidesPerView: 2
    },
    // when window width is >= 992px
    992: {
      slidesPerView: 2
    }
  },

  // If we need pagination
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  },

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

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



</script>

Answer

1 of 2:

Set slidesPerView: "auto".

Docs demo: https://swiperjs.com/demos#slides-per-view-auto

In your case the slide width adapt the currently width of the slide content (The <img> inside). Related: boxmodel

2 of 2:

Set the image height to some value and width to auto.

/* css */
.swiper-slide img {
    width: auto;
    height: 200px;
}

*** The width will be proportional to the height

DEMO

var swiper = new Swiper(".mySwiper", {
    slidesPerView: "auto",

    loop: true,

    autoplay: {
      delay: 5000,
    },

    slideToClickedSlide: true,
    spaceBetween: 10,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });

.swiper-slide img {
    cursor: pointer;
    width: auto;
    height: 200px;
    border-radius: 10px;
    object-fit: contain;
  }

  .gallery-thumbs .swiper-slide {
    width: auto;
    border-radius: 10px;
  }

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/swiper-bundle.min.css" />



<h1>Swiper 8</h1>
<!-- Swiper -->
<div class="swiper mySwiper gallery-thumbs">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://picsum.photos/id/301/1000/900" />
    </div>
    <div class="swiper-slide">
      <img src="https://picsum.photos/id/89/800/1600" />
    </div>
    <div class="swiper-slide">
      <img src="https://picsum.photos/id/24/1500/800" />
    </div>
    <div class="swiper-slide">
      <img src="https://picsum.photos/id/225/1100/500" />
    </div>
  </div>
  <div class="swiper-pagination"></div>

</div>

<!-- Swiper JS -->
<script src="https://unpkg.com/[email protected]/swiper-bundle.min.js"></script>

Swiper Js Slider – Images overlapping in fixed height slider

Advertisement

Answer

1 of 2:

2 of 2:

DEMO