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

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">

This is what I get

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

Anyone got any ideas?

Community Page
Last updated: