initialSlide not working inside responsive breakpoints settings

[akmammo]

Guidelines for posting a new issue

• Please replicate your issue with this CodeSandBox and provide a link to it along with the issue description

initialSlide not working inside responsive breakpoints setting, slide gets start from last in breakpoints.

[marcioflaviof]

I can reproduce the bug if I put this code:

responsive: [
        {
          breakpoint: 600,
          settings: {
            initialSlide: 2
          }
        },
        {
          breakpoint: 300,
          settings: {
            initialSlide: 3
          }
        }
      ]

below dots, I will try to resolve this if possible

[akmammo]

No, i tried this way to remove the bug

responsive: [ { breakpoint: 600, settings: { initialSlide: 1 } }, { breakpoint: 300, settings: { initialSlide: 1 } } ]

But it is not working in Function based component, working fine in Class based component if i put settings inside render methode.

[sm3sher]

I can confirm that this is still an ongoing issue in v0.30.2

[VMLuca]

I can also confirm that it is still an issue: I created a demo here: https://codesandbox.io/p/sandbox/react-slick-playground-forked-hqfmn5?file=%2Findex.js%3A12%2C22

[sm3sher]

There is a workaround I am currently using but I still hope the issue to be resolved sooner or later.

const sliderRef = useRef<Slider>();

if (sliderRef?.current) {
    if (sliderRef.current.state.breakpoint === 430) { // state.breakpoint is either null or number
        sliderRef.current.slickGoTo(INITIAL_SLIDE);
    }
}

return (
    <Slider
        ref={sliderRef}
        responsive={[
            {
                breakpoint: 430,
                settings: {
                    slidesToShow: 1,
                },
            },
        ]}
    >
    ...
    </Slider>
);

This way the Slider goes to the predefined INITIAL_SLIDE if and only if the breakpoint is reached.

[VMLuca]

Thanks for sharing! Isn't there an useEffect missing? Unfortunately breakpoint is always null for me. Do you have a tip? Maybe some code you didn't share?

Here is my code:

const sliderRef = useRef<Slider | null>(null);

  useEffect(() => {
    if (sliderRef?.current) {
      if (sliderRef.current.state.breakpoint === 430) {
        // state.breakpoint is either null or number
        sliderRef.current.slickGoTo(1);
      }
    }
  }, [sliderRef.current]);

  return (

      <Slider
         ref={sliderRef}
         responsive={[
             {
                 breakpoint: 430,
                 settings: {
                     slidesToShow: 1,
                     dots: true,
                     arrows: true,
                     centerMode: true,
                 },
             },
         ]}>
         ...
         </Slider>
);

[sm3sher]

I don't like using ref.current as a useEffect dependency as this is considered an anti-pattern.

In my case I only want this initially hence I omit the useEffect. Its also important to use the specific breakpoint you need, if you have multiple breakpoints, you can if-else or switch-case them.

430 is just an example and in order to test this behavior you would need to have multiple slider children and the browser should have a width of less or equal to the specific breakpoint. You might want to reload the browser in the specific resolution since I had some problems with hot reloading that responsive slider.