react slick slider not working in first render for responsive design

[hafiztblr]

var settings = { dots: false, arrows: true, infinite: false, speed: 500, slidesToShow: 4, slidesToScroll: 4, initialSlide: 0, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, initialSlide: 0, } }, { breakpoint: 768, settings: { slidesToShow: 2, slidesToScroll: 2, initialSlide: 0, } }, { breakpoint: 640, settings: { slidesToShow: 1, slidesToScroll: 1, initialSlide: 1, } } ] };

Would it be possible to have initialSlide be 1 if the screen is less than 640px wide when the Slider first mounts? slidesToShow will correctly be 1 instead of 3, could we override initialSlide the same way. I want to fix this for both web and mobile. For the first render in the web 4 slides are coming. but when the screen size is below 1024, there are no slides coming in the first render

[MacroMelon]

I believe I have a simillar issue - if I load (or reload) into a window much smaller than the breakpoints I've set, it renders the default slidesToShow (4) instead of any less. When I slightly resize the window, it updates properly and works right from then on. This is an issue on mobile because you can't really "resize" the browser window so it gets stuck on too many slides being shown.

My slider settings are as follows:

const sliderSettings = {
        dots: false,
        infinite: numItems > 1, //fix for https://github.com/akiran/react-slick/issues/2093
        speed: 100,
        slidesToShow: 4,
        slidesToScroll: 1,
        arrows: false,
        afterChange: (current : SetStateAction<number>) => setCurrentIndex(current),
        responsive: [
            {
                breakpoint: 1000,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 1,
                    infinite: true,
                    dots: true
                }
            },
            {
                breakpoint: 700,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                    initialSlide: 2
                }
            },
            {
                breakpoint: 500,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    };