Search code examples
nuxt.jsswiper.jsnuxt3.js

Nuxt - Swiper loading size

I use Nuxt 3 with Nuxt Swiper module

Swiper code:

<Swiper
    :slides-per-view="6"
    :spaceBetween="20"
>
    <SwiperSlide v-for="slide in 10" :key="slide">
        <div class="product-card">
            <p>text</p>
        </div>
    </SwiperSlide>
</Swiper>

When I refresh the page, my swiper looks like this during the refresh. It has only one slide per view: enter image description here

but when the page finishes loading, the perView parameter is updated and the swiper already has 6 slides per page enter image description here

I need it to have 6 slides per view right from the start. Thank you for help.

Solution

  • If you are running in Universal mode, the first page visit is rendered in the server side.

    If swiper only gets initiated on the client side it will only inject its style once client-side javascript is loaded.

    This means that you might need to manually style your slides so it looks like a 6 column layout even without swiper.