Slick slider doubles?

Question

css

Hello. Slick slider when opening the page shows all blocks large and even those that are hidden, does anyone know how to solve it? It helps to refresh the page, but in fact the user will not do this.

Answer 1

Your slider initialization is very late, and your picture takes the height of the container in which it is located, so it bursts to the floor of the screen. And when you connect the slider, the classes to which your css is tied appear in it:

.slick-slide img {
    margin-top: 25px;
    width: 80%;
    display: block;
    padding-left: 70px;
}

This is the wrong approach. Until the slider is connected, your styles will not be connected either. You either write the style on the image itself or bind to something static, at least to the slider container to the slider class to which you attached the slick. In general, read about BEM and you will never have such problems.