React-slick slider gets distorted when adding more images after initialisation

Question

I am using the React-slick slider to display the images given by the random user API. I followed the steps given on the npm page for the react slider and installed the slick carousel and added the two CSS files to the component.

I wanted to add more images to the existing slider if the user clicked on the next arrow or dragged the slider to the left, so im using the afterChange callback to update my state so that the useEffect having this state value as the second argument can be called and then concat the previous data with the new data.

Here I noticed when the user clicks next or drags the slider to the left sometimes there is a distortion.

https://stackblitz.com/edit/react-nlxodz has one slider and one text line below it, slide the slider continuously and you can see that for a few brief seconds the text under the slider gets pushed even further down and then comes back up to the original place.

Documentation suggests the below CSS if there is a flex prop on the slider. However, my code doesn't have flex properties.

Flexbox support
If you have flex property on container div of slider, add below css

* {
  min-height: 0;
  min-width: 0;
}

is this issue raised because of the way im adding data to the slider or an issue with the CSS? is there a solution where that distortion is not shown when the user swipes or slides very fast?

Answer 1

Wrap Slider with div

 <div style={{ backgroundColor: "green", height: "140px" }}>
          <Slider {...settings}>
            {rowData.map(i => (
              <div>
                <img src={i.picture.large} />
              </div>
            ))}
          </Slider>
        </div>
        <div>KEEP AN EYE ON THIS TEXT WHILE SCROLLING</div>