Equal space between slides of dynamic width?

[elliott-w]

For example:

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="image_one_url" style="width: auto; max-height: 100px;">
    </div>
    <div class="swiper-slide">
      <img src="image_two_url" style="width: auto; max-height: 100px;">
    </div>
    <!-- more slides -->
  </div>
</div>

 new Swiper('.swiper-container', {
  loop: true,
  spaceBetween: 'auto',  // <- this is what I want
  slidesPerView: 4,
  slidesPerGroup: 4,
})

Currently when you set the slidesPerView and spaceBetween options you get slides of fixed width. I want slides that have the same width as their child elements and have an equal amount of space between them in the current "view". Basically I want the same effect as justify-content: space-between for each 'view'. `Is this possible or is this a major feature request?

[stereonom]

I had the same issue.
But I found a workaround with css:
Say your "child-element" has a fixes width of 240px.

1. enable watchSlidesProgress (this is important, as we need a class of all visible-slides!
2. the css "magic"

/* center all */
.swiper-slide-visible > * {
  margin-inline: auto;
}
 /* the first and last goes all the way to their edges */
.swiper-slide-visible:nth-child(1 of .swiper-slide-visible) > * {
  margin-inline-start: 0;
}
.swiper-slide-visible:nth-last-child(1 of .swiper-slide-visible) > * {
  margin-inline-end: 0;
}
/* you have 4 slides, that "rest" space times 4 is all the space from 4 slides. divides by 3, as you only want 3 gaps. and divided by 2, as you only style the 2 elements in the middle. */
.swiper-slide-visible:nth-child(2 of .swiper-slide-visible) > * {
  margin-inline-end: calc((100% - 240px) * 4 / 3 / 2);
}
.swiper-slide-visible:nth-last-child(2 of .swiper-slide-visible) > * {
  margin-inline-start: calc((100% - 240px) * 4 / 3 / 2); 
}