Next.js – on initial page load, the slidesPerView settings appear to be ignored, resulting in content flicker

[sebpowell]

Hi there, thank you for this great library. I've tried a few, and this is hands down the best one.

I was hoping you might be able to advise me on the following issue that I've encountered when using it with Next.js (13.4.2).

On initial page load, it would appear all slidesPerView settings are being ignored, please see the below video. I would like to avoid the 'flicker' that you can see in the video – is this possible, and if so, what would be the right way to go about it? I have tried a few different things, including checking that the component has mounted before showing the slider, but no luck as of yet.

CleanShot.2023-06-25.at.10.24.01.mp4

The Codesandbox for the above video is available here: https://codesandbox.io/p/sandbox/cool-goldberg-3t629p

Any advice would be greatly appreciated.

[AbdushukurRasulov]

@sebpowell
did you fix

[sebpowell]

@AbdushukurRasulov – no sadly not. Are you having the same problem?

[AbdushukurRasulov]

Yes, the same problem

[sebpowell]

@AbdushukurRasulov – it's a problem with other libs too, here's a proposed solution for KEEN: rcbyr/keen-slider#16. I also found this that I might try building: https://medium.com/@yi.zhuang1996/building-a-react-carousel-component-that-rocks-with-server-side-rendering-support-part-1-aba5ccfae76e

[sebpowell]

@AbdushukurRasulov btw, the above seems to be based on this: https://github.com/YIZHUANG/react-multi-carousel/tree/master – which apparently supports SSR, although I tried the demo and was still getting a flicker.

[AbdushukurRasulov]

@sebpowell tried with another library, the same issue.
please, ping here if you found solution.
Thank you ))

[sebpowell]

@AbdushukurRasulov – did you try the one above? Apparently, that one should work, because it works with SSR (at least, that's what it says) – I haven't had a chance to try it though.

[msobkyy]

same behavior

[bank188950]

I put this code in component. Very confused. What does it have to do with it?
--- Fixbug ---
const initialTheme: string = localStorage.getItem('theme') || 'light';

[dwalker93]

First you have to check whether the dom fully loaded.
use a useEffect and useState in Swiper componet like this.
It's a good user experience return a skeleton rather than returning null while dom loading.

const SwiperSlide = () => {
const [load, setLoad] = useState(false);
  useEffect(() => {
    setLoad(true);
  }, []);

  if (!load) return null;
  return (
       <Swiper>
            <SwiperSlide>
             ..............
            </SwiperSlide>
       </Swiper>
   )
}

[ehmasuk]

i found this as a solution and it works for me. I don't know how does it work, but it fixed the issue.
---Solution---

const initialTheme = localStorage.getItem('theme') || 'light';

add this code on top of the component where you are using the slider, thats it. It should solve the issue

[nctay]

Yep, it works. Definitely some hack with client rendering, although i use 'use client' directive everywhere.

[mahmoudAcm]

@sebpowell here is my workaround