Giters

nolimits4web / swiper

Most modern mobile touch slider with hardware accelerated transitions

Home Page:https://swiperjs.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

isrezaei opened this issue · comments

commented

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
commented

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>