How to properly connect Slick Slider to this slider type?

Question

css

There is such a slider in which there are 3 slides
1st 2nd

3rd

I

don’t understand how to connect it correctly so that everything is displayed correctly, please tell me how to implement it correctly?
Link to codepen

Answer 1

You don't have slick enabled on your codepen.
From experience I can say that slick-slider is a very flexible thing and works exclusively with blocks.
Those. you make up a separate slide as a block and throw it into the slick.
There is no content and img (as far as I know).
Everything should look something like this:

<div class="slider-name" style="width: 100%; height: 800px">
    <!-- cover - растянуть изображение, сохраняя пропорции, но с обрезанием -->
    <div style="width: 100%; height: 100%; background-image: url(path/to/image1.jpg); background-size: cover">
        Данные первого слайда
    </div>
    <div style="width: 100%; height: 100%; background-image: url(path/to/image2.jpg); background-size: cover">
        Данные второго слайда
    </div>
    <div style="width: 100%; height: 100%; background-image: url(path/to/image3.jpg); background-size: cover">
        Данные третьего слайда
    </div>
</div>