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