Как смешать контент и подогнать его под слайды в swiper.js? ⇐ CSS

[Anonymous]

У меня есть слайдер, который должен иметь возможность смешивать контент на слайдах, чтобы слайды были только по ширине этого контента. Я просмотрел слайдыPerView: 'auto'; и он почти работает, но в некоторых случаях слайд занимает слишком много места по сравнению с содержимым.
Кто-нибудь знает, что я здесь делаю не так?
(также в codepen)

Код: Выделить всё

const swiper = new Swiper(".mySwiper", {
slidesPerView: 'auto',
spaceBetween: 30,
centeredSlides: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});

Код: Выделить всё

.swiper {
width: 100%;
height: 100%;
}

.swiper-slide {
height: 100%;
width: fit-content;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid mistyrose;
}

.swiper-content {
display: flex;
align-items: center;
padding: 2rem;
column-gap: 2rem;
}

Код: Выделить всё

Slide 1 Slide 1 Slide 1 Slide 1





Slide 1 Slide 1 Slide 1 Slide 1




Slide 1 Slide 1 Slide 1 Slide 1 Slide 1 Slide 1 Slide 1 Slide 1 Slide 1 Slide 1 Slide 1 Slide 1

Подробнее здесь: https://stackoverflow.com/questions/798 ... -swiper-js