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
flex-shrink: 100 !important;
width: **set according to your design**;
It works!
Same issue try to uncheck flex-shrink:0
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,
});