Swiper slides-per-view="auto" confusion

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

Screenshot 2021-05-16 at 13.04.22776×577 127 KB

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

Screenshot 2021-05-16 at 13.07.001183×516 61.4 KB

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

Anyone got any ideas?