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

2

3 Answers

slidesPerView: 'auto'

and in CSS: (On the swiper-slide component itself.)

.swiper-slide{ width: fit-content;
}

1

flex-shrink: 100 !important;
width: **set according to your design**;

It works!

1

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> <!-- Additional required wrapper --> <div> <!-- Slides --> <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> ... </div> <!-- If we need pagination --> <div></div> <!-- If we need navigation buttons --> <div></div> <div></div> <!-- If we need scrollbar --> <div></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,
});

1

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.