'Swiper.js slide width

There was a big problem with Swiper.js
Is it possible to somehow make the width of the slides equal to the width of the content again?
At the moment, all slides stretch to the full width of the parent, most likely because I set the container grid element
I have been trying to solve the problem for a very long time, but I just can’t tell me I will be grateful!!!
(screenshot attached) enter image description here

javascripthtmlcssswiperswiper.js


Solution 1:[1]

Same issue try to uncheck flex-shrink:0

Solution 2:[2]

As far as I know, there isn't a standard way to make the width of the slides equal to the width of the content. But, you can specify your desired width for each slide manually in your CSS file as below:

HTML:

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</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>

CSS:

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-slide {
    width: 50%;
}

.swiper-slide:nth-child(2n) {
    width: 20%;
}

.swiper-slide:nth-child(3n) {
    width: 40%;
}

Also import these two lines of code in your CSS file:

swiper/css
swiper/css/bundle

JS:

const swiper = new Swiper('.swiper', {
  speed: 400,
  spaceBetween: 100,
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 John Allen
Solution 2 Kamran Taghaddos

Related Questions