Help! Swiper Stretching the first slide

[Nuk3guy]

Hi All,
Trying to figure out this issue actually but no luck so far.

Im using nextjs 13.4 (App router)

Swiper is working but on page load, it stretches the first slide for couple of seconds, and then loads all the other slides.

I can import the carousal dynamically with dynamic imports, but that's something i don't really want.

Is there a way to load swiper/carousal as soon as the page loads without any layout shift?

heres my code:

`
"use client";
import React from 'react';
import { Swiper, SwiperSlide } from "swiper/react";
import Data from '../../data/class';
import { Autoplay } from 'swiper';
import ClassIcons from './ClassIcons';

const SearchByClass = () => {
const dataComp = Data.map((data, index) => {
return (

<ClassIcons
{...data}
key={data.id}
class={data.title}
cars={data.cars}
icon={data.icon}
/>

);
}
);
return (

    <Swiper
        className='swiper-container'
        centeredSlides={false}
        spaceBetween={10}
        modules={[Autoplay]}
        autoplay={{
            delay: 6000,
            disableOnInteraction: false,
        }}
        resizeObserver={true}
        freeMode={true}
        speed={2000}
        loop={true}
        breakpoints={{
            0: {
                slidesPerView: 4.3,
                spaceBetween: 6
            },

            480: {
                slidesPerView: 6,
                spaceBetween: 6,
            },
            768: {
                slidesPerView: 7,
                spaceBetween: 7
            },
            968: {
                slidesPerView: 8,
                spaceBetween: 8
            },
            1100: {
                slidesPerView: 12,
                spaceBetween: 8,
                observeParents: true,
                paginationClickable: true,
            }
        }}
    >
        {dataComp}
    </Swiper>
);

};

export default SearchByClass;
;

`

[rajuprasad-dev]

Did you find any solution for this??

[DylandeBruijn]

Did you find a solution? I'm running into the same problem.

[Nuk3guy]

na man, no solution so far, its kinda weird though, checked all their documentation still no solution, i started using slick , gets the job done

…

Message ID: <nolimits4web/swiper/repo-discussions/6810/comments/11981936@ github.com>

[DylandeBruijn]

I figured it out in the meantime. You need to calculate the width of the slides yourself and add it to your website as critical CSS.

Example:

<style>
    /* slideWidth = ((containerWidth - (slidesPerView - 1) * spaceBetween) / slidesPerView) */

    @media (min-width: 576px) {
        .gallery-swiper .swiper-slide {
            width: calc((100% - (2 - 1) * 32px) / 2);
            margin-right: 32px;
        }
    }

    @media (min-width: 768px) {
        .gallery-swiper .swiper-slide {
            width: calc((100% - (4 - 1) * 32px) / 4);
            margin-right: 32px;
        }
    }

    @media (min-width: 1500px) {
        .gallery-swiper .swiper-slide {
            width: calc((100% - (6 - 1) * 32px) / 6);
            margin-right: 32px;
        }
    }
</style>

Not the best solution but it gets the job done.
I'll look into Slick slider as I'm running into a lot of problems with Swiper.