Swiper.js slide width

Question

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

Otolith

width: auto -- swiperjs.com/demos#slides-per-view-auto – Antonetteantoni

Thanks a lot!!! With this swiper, the problem was solved. But there is another problem. If that slide stretched to the full width, then I have another swiper, but there the slide stretches to the full width and height. I need not one slide here, but 6. I managed to arrange 3 slides in a row, but 6 so that there were 3 slides in each row did not work :( View screenshot – Otolith

Answer 1

slidesPerView: 'auto'

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

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

Corissa

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Hookah

I think we should add !important to overwrite swipers own css – Biparous

Answer 2

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

It works!

Perturb

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Ingress

You should say where to put this, and why it works. – Sitar

Answer 3

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

Rysler

this forces the slide into a specific size... its the built-in behavior - only difference here is that you object-fit the images. But thanks mate 👍 – Tricostate

Answer 4

When I found this topic on the Stackoverflow, I try to solve another problem, how to change the slide width to 25% and show 4 slides on the screen.

my answer:

slidesPerView: 4,

other examples

Cutinize

This doesn't change the width. It only changes how many slides are shown at a time. – Sitar

In my case, it changed the number of slides and the width of the slides. example: Github – Cutinize

The width in that case was only changed to accomodate the number of slides. If someone doesn't want to have the slide number changed, this wouldn't be an ideal solution. Glad it worked for you though! – Sitar