Swiper Js styles take time to load after page refresh in Next JS. Swiper slides are stretched till Next Js loads style. How to fix this?

[Dev-SardarAbdul]

I have Next 14.0.3 app with tailwind CSS. I installed swiper JS of version 11.0.5 with npm. Problem is when I reload page, swiper styles take 1 or 2 seconds to load. Swiper slides become fully stretched till Next Js loads swiper styles. Here is gif for better understanding: https://gyazo.com/5ba13d4a8eed7407cb124f2179309bb6.

Thanks in advance for any help.

My Swiper Component:

import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination } from "swiper/modules";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

function SliderComp() {
  return (
    <div className="relative">
      <Swiper
        modules={[Navigation, Pagination]}
        spaceBetween={10}
        slidesPerView={3}
        grabCursor={true}
        navigation
        pagination={{ clickable: true }}
      >
        <SwiperSlide className="bg-sky-200 min-h-[300px]">Slide 1</SwiperSlide>
        <SwiperSlide className="bg-sky-200 min-h-[300px]">Slide 2</SwiperSlide>
        <SwiperSlide className="bg-sky-200 min-h-[300px]">Slide 3</SwiperSlide>
        <SwiperSlide className="bg-sky-200 min-h-[300px]">Slide 4</SwiperSlide>
      </Swiper>
    </div>
  );
}

export default SliderComp;

Here is my package.json:
{
  "name": "piuwee",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "animate.css": "^4.1.1",
    "antd": "^5.12.1",
    "next": "14.0.3",
    "node": "^18.14.0",
    "react": "^18",
    "react-animation-on-scroll": "^5.1.0",
    "react-compare-slider": "^3.0.1",
    "react-dom": "^18",
    "react-fast-marquee": "^1.6.2",
    "react-icons": "^4.12.0",
    "react-slick": "^0.29.0",
    "react-timer-hook": "^3.0.7",
    "slick-carousel": "^1.8.1",
    "swiper": "^11.0.5"
  },
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.3.0"
  }
}

[thoangson95]

I also have the same question as you. I wonder if you have solved this problem yet?

[Dev-SardarAbdul]

Haven't found any solution yet. I add loader for 1 2 seconds on top of swiper until styles load for now.

[bank188950]

I put this code in component. Very confused. What does it have to do with it?
--- Fixbug ---
const initialTheme: string = localStorage.getItem('theme') || 'light';

[Dev-SardarAbdul]

Code you provided has fixed this swiper problem but what this code has to do with Swiper? I wonder what made you write this code here? Did you find it online somewhere?

[Pascaldhh]

This is not a fix. When I add that code the page loads longer and doesnt return on the scroll position you where. You get send back to the top of the website.

[JavadMoghaddam2001]

Did you find a solution for that?!

[RezaGhx]

Hi Javad. are you experienced with changing the props dynamically on the react mode?

[Dev-SardarAbdul]

Unfortunately, haven't found any fix for this yet.

[JakubOlejnik1155]

I am facing the same problem. Do you have any solution for this?

[Dev-SardarAbdul]

Unfortunately, haven't found any fix for this yet.

[Maoux-dev]

Please mention if there's a solution thank you

[Raloynner]

const [initSlides, setInitSlides] = useState(false);

<Swiper
spaceBetween={20}
onInit={() => setInitSlides(true)}
>
{initSlides &&
recommended?.map((item) => {
return (

{item}

);
})}

[Dev-SardarAbdul]

Haven't found any solution to this. This is what I am currently doing: https://gyazo.com/d20b2763bb8538399ec4fc5e81a8b5f1. It's not a solution but still showing loading is better than stretched UI in my opinion.

[Raloynner]

I think so too, there is a problem in swiper that it is only initialized on the client,