Prop `data-index` did not match. Server: "-5" Client: "-3"

[krean93]

I am using Next JS for SSR.

When I implement responsive breakpoints, I get this warning: Prop data-index did not match. Server: "-5" Client: "-3"

My code looks like this: const settings = { dots: true, dotsClass: "custom-dots", infinite: true, speed: 500, slidesToShow: 5, slidesToScroll: 5, nextArrow: <NextArrow />, prevArrow: <PrevArrow />, appendDots: dots => ( <div> <ul style={{ margin: "0px" }}> {dots} </ul> </div> ), customPaging: function(i) { return ( <span className="custom-dot"></span> ); }, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2, } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] };

Could someone please point out how can this be solved? Thanks in advance!

[schang124]

I have the same issue with nextjs & ssr. Is there any ssr setting for slick?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[zhangjing28]

I have the same issue too, is there any help?

[linkurzweg]

Same problem here, anyone knows how to fix it?

[bobinska-dev]

same problem with me as well... 3 years and no help???

[bekhzodx64]

same problem :(