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

isrezaei commented 2 months ago

Check that this is really a bug

[x] 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

[X] Follow our Code of Conduct
[X] Read the docs.
[X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
[X] 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

JyotiRSharma commented 2 months ago

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 commented 1 month ago

Nuxt 3 same problem

goswamikaushik001 commented 3 weeks ago

same problem

Nuzzlet commented 1 week ago

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.

nolimits4web / swiper