Swiper slides-per-view="auto" confusion

[psweb]

I have a swiper on my page and am looking for this effect

Replace the JS in the codepen with this please

var mySwiper = new Swiper('.swiper-container', {
    loop: true,
    effect: 'coverflow',
    centeredSlides: true,
    slidesPerView: 'auto',

    // Navigation arrows
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

})

The result looks like this

If my Wappler code looks like this, i should get a similar result

<div is="dmx-swiper" id="swiper3" dmx-bind:slides="sc_get_and_set_product_card_filters.data.query_final_selection" effect="coverflow" centered-slides="true" loop="true" slides-per-view="auto">
    <div class="swiper-slide">
        <img dmx-bind:src="il_url_local.replace('var-bp','xl')" class="img-fluid">
    </div>
</div>

This is what I get

Which is like the slides-per-view="1" and not `auto

Anyone got any ideas?

[Teodor]

Check the CSS styles they applied to the swiper and its slides in the codepen you shared.

[psweb]

On the main container I have 1 additional class of swiper-container-initialized
The swper-wrapper inside that looks the same
The swiper-slides look the same as far as I can tell.

Could you possibly check if I am missing something Teo
The page I am trying this on is https://www.pukkaevents.com/
The top swiper under the filtering is this test im talking about.

The second one under that I was fiddling around and actually set the slide-per-view="1.5" which I do not think is even allowed, but I got a bit closer to what the codepen looks like.
The reason I never continued with this one was that the first and last slide keep going twice as big as any other slide in the set, the last is Exclusive Sailing Charter, and the first is Vanlife Iceland cards.

[Teodor]

Paul, i am referring to the custom CSS styles applied on the codepen link, overriding the default swiper styles, not the classes you see in the rendered page:

Also you need to use slides per view auto.

[psweb]

Ahh ok got it, lol, that makes more sense.

[psweb]

Thanks Teo, thats exactly what it was, all working now, wish I had asked sooner, spent a few hours trying to figure this one out. Thanks again.

[11179]

Thank you swiper slide width resolve problem