How to remove the invisible part of the pictures in the slider on page load?

Question

JavaScript

Good afternoon dear experts. Faced the following problem:
When loading a web page, all the slides start to appear, and after loading the slider starts working normally.
During loading:

After loading:

Question: how to fix the situation with the image of all slides, when loading the page? (all slides line up in a column). I use Slick Slider.
Thank you very much for your help!

Answer 1

Make a preloader, usually great in such cases. Either reduce the size of the images, but something else can increase the loading of the site, a preloader is better.