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