I’d like to use swiper.js both for intended purpose and also slightly different ways. I’d like to create an appStore and playStore like UI. And they do have textual carousels where you can slide the navigation items to reveal the hidden ones. I wanted to do the same, but all items came with the same size!

When I use the swiper.js, I cannot get my textual items to be auto size, depending on the text content. if it is a short link with say 10 latters, that item should be 75px or so and if it is 20 letters, maybe 95px on the fly… whatever it fits.

This can be achieved more easily when that tect carousel is the only one. But when you have 10 more carousels each having its own width set up, some with auto some with fixed width, I have a hard time.

What would be the parameters I need to adjust so that the following code behaves that way:

I did the following, but that did not work at all:

.text-carousel-A{ width:auto; }

also this JS

const textCarousel = new Swiper('.text-carousel', { slidesPerView: 'auto', // Adjust to fit content width spaceBetween: 1, loop: false, // Optional: loops the slides centeredSlides: false, // Center the active slide });

Here is the html which is pretty standard, one carousel with images, one with text.

`

<!-- Text Carousel -->
<div class="swiper-container text-carousel">
    <div class="swiper-wrapper" >
        <div class="text-carousel-A swiper-slide">ABC</div>
        <div class="text-carousel-A swiper-slide">Short Text</div>
        <div class="text-carousel-A swiper-slide">Longer Text Example</div>
        <div class="text-carousel-A swiper-slide">ABC2</div>
        <div class="text-carousel-A swiper-slide">D</div>
        <div class="text-carousel-A swiper-slide">Haluk</div>
        <div class="text-carousel-A swiper-slide">A KaramrteC</div>
        <div class="text-carousel-A swiper-slide">Fussilet</div>
        <div class="text-carousel-A swiper-slide">gemini</div>
        <!-- Add more slides as needed -->
    </div>
    <!-- Pagination -->
    <div class="swiper-pagination"></div>
    <!-- No navigation buttons needed -->
</div>`