Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Weird behavior of Swiper.js in Next.js 13 & 14 #7577

Open
5 of 6 tasks
isrezaei opened this issue Jun 18, 2024 · 9 comments
Open
5 of 6 tasks

Weird behavior of Swiper.js in Next.js 13 & 14 #7577

isrezaei opened this issue Jun 18, 2024 · 9 comments
Labels
React

Comments

@isrezaei
Copy link

isrezaei commented Jun 18, 2024 •
edited
Loading

Check that this is really a bug

  • I confirm

Reproduction link

Bug description

I don't know why I'm experiencing this behavior when I use Swiper in Next.js! Before the initial client-side rendering (SSR mode), I get an unstable Swiper style, as seen in these images. I don't know how to fix this on the first initial mount on every refresh.

bulshit behavior
issue

Expected Behavior

"I don't want to see the flickering issue at the first refresh. It's not normal."

Actual Behavior

No response

Swiper version

11.1.4

Platform/Target and Browser Versions

chrome lasteat version

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
@isrezaei isrezaei added the React label Jun 18, 2024
@JyotiRSharma
Copy link

Adding the cdn swiper files in document.tsx, helped me resolve this issue:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

@Wilson2254
Copy link

Nuxt 3 same problem

@goswamikaushik001
Copy link

same problem

@Nuzzlet
Copy link

Nuzzlet commented Sep 5, 2024

The flicker appears to stem from Swiper setting each slide's width/height after hydration, but not before on the server.

A solution to consider would be swiper offering some way to manually handle element height/width so we can seamlessly preserve the values from the server to the client.

@Nuzzlet Nuzzlet mentioned this issue Sep 5, 2024
Open
6 tasks
@Wimmind
Copy link

Wimmind commented Sep 18, 2024 •
edited
Loading

Adding the cdn swiper files in document.tsx, helped me resolve this issue:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

I use app router from nextjs 14, placed it like this, but it does not solve the problem...

const RootLayout: React.FC<Props> = ({ children }) => {
  return (
    <html>
      <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
        <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
      </head>
      <body>
               {children}
      </body>
    </html>
  )
}

@JyotiRSharma
Copy link

JyotiRSharma commented Sep 20, 2024 •
edited
Loading

Adding the cdn swiper files in document.tsx, helped me resolve this issue:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

I use app router from nextjs 14, placed it like this, but it does not solve the problem...

const RootLayout: React.FC<Props> = ({ children }) => {
  return (
    <html>
      <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
        <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
      </head>
      <body>
               {children}
      </body>
    </html>
  )
}

I guess you need to use the hijacked script from Next
check this out https://nextjs.org/docs/app/building-your-application/optimizing/scripts#application-scripts

Edit: this is for app router

@Wimmind
Copy link

Wimmind commented Sep 23, 2024

Adding the cdn swiper files in document.tsx, helped me resolve this issue:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

I use app router from nextjs 14, placed it like this, but it does not solve the problem...

const RootLayout: React.FC<Props> = ({ children }) => {
  return (
    <html>
      <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
        <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
      </head>
      <body>
               {children}
      </body>
    </html>
  )
}

I guess you need to use the hijacked script from Next check this out https://nextjs.org/docs/app/building-your-application/optimizing/scripts#application-scripts

Edit: this is for app router

I tried, thanks, but it didn't help unfortunately...

@mahmoudAcm
Copy link

mahmoudAcm commented Oct 29, 2024 •
edited
Loading

@isrezaei The issue arises because Swiper calculates and assigns each slide's width and margin only after the JavaScript loads. This can cause layout shifts, especially in server-side rendering (SSR) environments where initial styles are applied inconsistently.

To prevent this, a workaround could involve pre-setting the slide widths and margins in CSS based on the expected layout, so the layout is more stable before Swiper's JavaScript adjusts the slides. Additionally, if the layout shifts are too significant, consider implementing a custom solution to handle these styles on the server side.

@kousikdas02
Copy link

livr.net/npm/swiper@11/swiper-bundle.min.js"></script>

Do you have any working solution for that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
React
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@Nuzzlet @JyotiRSharma @Wimmind @Wilson2254 @kousikdas02 @mahmoudAcm @isrezaei @goswamikaushik001