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]

Check that this is really a bug

• I confirm

Reproduction link

https://gyazo.com/5ba13d4a8eed7407cb124f2179309bb6

Bug description

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

Expected Behavior

Swiper styles should be loaded immediately in next js preventing slides to be stretched for first 2 3 seconds after page refresh.

Actual Behavior

Swiper styles take time to load in next js, causing swiper slides to be stretched.

Swiper version

11.0.5

Platform/Target and Browser Versions

Windows 11 Chrome

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[nolimits4web]

Do you want to ask a question? Are you looking for support? Stack Overflow or Swiper Discussions is the best places for getting support

Please, don't use GitHub issues for questions