How to get rid of the "jumping" photo when loading slick?

Question

css

There is a slick slider in which the photo is of different proportions and sizes, I limit the img in height and stretch the photo through object fit: cover. When the site loads for a couple of seconds, the photos, as if without a slider from top to bottom, go in their usual size, and only after a couple of seconds they fall into place in the slider and are cut off. Can the priloader help, but are there other options?

Answer 1

.slider_wrap > .slider_item:nth-child(n+2) { display: none; }

hide all slides except the first one
, if the slick is initialized, this selector will no longer work

Answer 2

Use background-image instead of img and set a fixed height on those divs. Alternatively, wrap the img in a div and give it a fixed height.