Как правильно подключить Slick Slider к данному типу слайдера?

Question

[Alex_L1992]

Есть вот такой сладер в котором 3 слайда
1-й

2-й

3-й


Не пойму как правильно его подлючить, чтобы все корректно отображалось, подскажите пожалуйста как правильно его реализовать?

Ссылка на Codepen

Answer 1

[gh0sty]

У тебя на codepen не подключен slick.
На опыте скажу, slick-slider - вещь очень гибкая и работает исключительно с блоками.
Т.е. ты верстаешь отдельный слайд как блок и кидаешь его в слик.
Нету никакого content и img (как я знаю).
Примерно так все должно выглядеть:

<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>

Comments

[gh0sty]

Кастомизировать сам слайдер можно можно через файл slick-theme.css
Читай доки тут

[Alex_L1992]

Спасибо большое! Помогло :)

[gh0sty]

Alex_L1992, Да мне не жалко, сам только зашел на этот сервис с трудной проблемой, где "профессионал" не помог, а ноунейм вытащил в 2 строчки.