Question

0

341

Views

Keen-slider doesn't work well with Server-side render on the first render - NextJS

I am using nextJS with typescript and got 1 error when using the keen-slider library v5.4.0. The error occurs when the keen-slider is rendered for the first time, the items are not of the same type transform when I drag the slider. It causes items to be stacked on top of each other as shown in the image below. Has anyone come across such a case? Please let me know anything that can fix it. Thank you all.

enter image description here

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-25T05:01:34.551Z

I fixed the above by upgrading to keen-slider version 6.6.14.

npm i keen-slider@v6.6.14

And add this code below

const [internalSliderRef, internalSlider] = useKeenSlider(sliderOptions);

  React.useEffect(() => {
    internalSlider.current?.update({
      ...sliderOptions
    });
  }, [internalSlider, sliderOptions]);

Thank for all

0

341

Keen-slider doesn't work well with Server-side render on the first render - NextJS

1 answers

0

Find remote jobs

Andres GPT