Using Swiper in Nuxt3 causes flickering issues.

[luoriwusheng-xia]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/p/devbox/nuxt3-swiper-flicker-bug-rxlzms

Bug description

All dependencies and packages are the latest versions. I hope to use Swiper in Nuxt3 with SSR capability, but currently, the images flicker at the moment of loading.

Expected Behavior

When first entering the page, the images flicker, likely because Swiper has not accounted for the remaining space allocated by the parent container.

Actual Behavior

Images do not flicker, and the Swiper container displays normally.

Swiper version

11.1.9

Platform/Target and Browser Versions

macOS，Chrome

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?

• [X] I'm willing to open a PR

[luoriwusheng-xia]

[en] : Using client-only in Nuxt3 loses the ability for SSR rendering, which is not SEO-friendly.

[zh-cn]: 在Nuxt3中 使用 client-only 会失去SEO的能力。

[luoriwusheng-xia]

[en]: I tried loading swiper.min.css separately, but the flickering still occurs. Initially, I thought importing the CSS file via ESM might cause the CSS file to be dynamically inserted into the page through JavaScript, leading to the flickering. However, I found that even when loading the full CSS file separately, the flickering still persists.

[zh-cn]: 我尝试单独加载 swiper.min.css 但是还是会闪烁，我一开始以为是 通过 ESM引入 css文件会导致css文件是通过js动态执行插入到页面，导致的闪烁， 发现单独加载完整的css文件，仍旧闪烁

[luoriwusheng-xia]

Undesirable effect， The image placeholders are very large.

---

Desired result

[vishal-dev-hash]

The same issue is occurring in Remix as well. I can create a CodeSandbox demo if needed.

[dijkermans]

I think you are referring to the content shift that occurs. I solve this issue in the following ways:

Use CSS to define the size of each slide, corresponding to the Swiper breakpoints.

Or:

Use CSS to make the images visible once the slider is initialized.

[Nuzzlet]

I think this is a duplicate of: #7577

[dijkermans]

I think you are referring to the content shift that occurs. I solve this issue in the following ways:

Use CSS to define the size of each slide, corresponding to the Swiper breakpoints.

Or:

Use CSS to make the images visible once the slider is initialized.

Example:

breakpoints: {  
    900: {
        slidesPerView: 2.3,
    },  
},

@media only screen and (min-width: 900px) {

    .swiper-slide {

        width: calc(100% / 2.3);

    }

}

[Nuzzlet]

I think you are referring to the content shift that occurs. I solve this issue in the following ways: Use CSS to define the size of each slide, corresponding to the Swiper breakpoints. Or: Use CSS to make the images visible once the slider is initialized.

Example:

breakpoints: {    
  900: {
      slidesPerView: 2.3,
  },  
},

@media only screen and (min-width: 900px) {

  .swiper-slide {

      width: calc(100% / 2.3);

  }

}

Absolutely did not think to try this. I needed a workaround with CSS Var to handle my page margin and handle spaceBetween, but got everything working!

It would be awesome perhaps if I could also just disable or replace the Javascript resizing mechanism of swiper… it seems silly to use both when the CSS performs better anyway. Anyone know of a way to disable it?