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

[sebpowell]

Hi there, thank you for this library.

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 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?

https://github.com/rcbyr/keen-slider/assets/1786366/a94127ab-b009-4139-aaf6-c81d33daeb37

I have tried a few different things, including checking that the component has mounted before showing the slider, but no luck as of yet.

Codesandbox for the above: https://codesandbox.io/p/sandbox/tender-newton-fjz9qm

Any advice would be greatly appreciated.

[berthelol]

Any updates on this ?

[alexandru-wd]

Having the same issue. Any updates on this? There is one fix that you add width:100% on parent container and then min-width:100% and max-width: 100%, it will work, but you won't be able to slides: {perView:3}, it will only be one slide 100% so it's not a viable option

[Amirjf]

Any update ? I have the same issue in next 13 app router ..

[MrProgrammer]

Any updates ? I have this problem on nextjs 14!!!

[shourovr82]

any updates ??

[MrProgrammer]

until fix this issue I use https://www.embla-carousel.com/examples/predefined/

[MatanMaimon]

simple workaround:

  const [keenSliderOptions, setKeenSliderOptions] =
    React.useState<KeenSliderOptions>({});
  const [sliderRef] = useKeenSlider(keenSliderOptions);

  React.useEffect(() => {
    setKeenSliderOptions({
      loop: true,
      mode: "free-snap",
      slides: isMobile
        ? { origin: "center", perView: 3, spacing: 0 }
        : { perView: 5, spacing: 0 },
      rtl: true,
      breakpoints: sliderBreakpoints,
    });
  }, [isMobile]);

[lazaro-contato]

any updates on this?