NextJs and react-slick strange behaviour

MirceaCapa commented 1 year ago

I'm working on a next js project and I want to implement react-slick slider sync using asNavFor propriety. Here is my code:

`import React, { useEffect, useRef, useState } from "react"; import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css";

// Material UI import { Grid } from "@material-ui/core";

const ReactSlickComponent = () => { const [state, setState] = useState({ nav1: null, nav2: null });

const slider1 = useRef(); const slider2 = useRef();

useEffect(() => { setState({ nav1: slider1.current, nav2: slider2.current }); }, []);

const { nav1, nav2 } = state;

const contentSliderSettings = { arrows: false, dots: false, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1, adaptiveHeight: items && items.length >= 9, responsive: [ { breakpoint: 650, settings: { infinite: items && items.length > 4 } } ], className: "no-dots" };

const imagesSliderSettings = { centerMode: true, accessibility: true, arrows: true, dots: true, speed: 500, slidesToShow: 3, slidesToScroll: 1, focusOnSelect: true, adaptiveHeight: true, responsive: [ { breakpoint: 650, settings: { infinite: items && items.length > 4, slidesToShow: 4 } } ] };

return (

{items.map((t, index) => ( <>

{t.content}

))} {items.map((t, index) => (

))}

); };

export default ReactSlickComponent; `

codesandbox code

Somehow this code works perfectly on codesandbox and on React app (I tried this on a real project build with create-react-app and works as I expected) but my Next Js project has this behavior: https://streamable.com/kz926z. I don't know what I'm missing or what I'm doing wrong here. Any help would be highly appreciated.

I know that infinite: false fixed this issue but I want that the slider to have an infinite loop behavior.

Sorry if this is not an issue but honestly I don't know where to ask this question better than in this repo.

Thank you in advance!

MirceaCapa commented 1 year ago

@akiran By any chance do you have time to take a look at this issue?

mehedirana commented 1 year ago

autoplay: true,
autoplaySpeed: 400,

It will works

akiran / react-slick

NextJs and react-slick strange behaviour #2196