Как реализовать здесь слайдер с помощью slick

Question

у меня не получается сделать слайдер, проблема заключается в визуальной части

HTML

                <div class="sec_04__cards slider">
                  <div class="sec_04__card">
                    <img src="img/sec4/icon2.png" alt="card 1 icon">
                    <h2>Заголовок программы <br/>или проекта</h2>
                    <p>После трансплантации <br/>организм тяжелобольного <br/>ребенка наиболее уязвим и <br/>подвержен различным <br/>заболеваниям и инфекциям, <br/>клетки полученные при <br/>трансплантации начинают <br/>«включаться» далеко не сразу. <br/>Период реабилитации <br/>начинается после пересадки <br/>костного мозга. Поскольку<br/> имму...</p>
                  </div>
                  <div class="sec_04__card">
                    <img src="img/sec4/icon2.png" alt="card 1 icon">
                    <h2>Заголовок программы <br/>или проекта</h2>
                    <p>После трансплантации <br/>организм тяжелобольного <br/>ребенка наиболее уязвим и <br/>подвержен различным <br/>заболеваниям и инфекциям, <br/>клетки полученные при <br/>трансплантации начинают <br/>«включаться» далеко не сразу. <br/>Период реабилитации <br/>начинается после пересадки <br/>костного мозга. Поскольку<br/> имму...</p>
                  </div>
                  <div class="sec_04__card">
                    <img src="img/sec4/icon3.png" alt="card 1 icon">
                    <h2>Заголовок программы <br/>или проекта</h2>
                    <p>После трансплантации <br/>организм тяжелобольного <br/>ребенка наиболее уязвим и <br/>подвержен различным <br/>заболеваниям и инфекциям, <br/>клетки полученные при <br/>трансплантации начинают <br/>«включаться» далеко не сразу. <br/>Период реабилитации <br/>начинается после пересадки <br/>костного мозга. Поскольку<br/> имму...</p>
                  </div>
                  <div class="sec_04__card">
                    <img src="img/sec4/icon4.png" alt="card 1 icon">
                    <h2>Заголовок программы <br/>или проекта</h2>
                    <p>После трансплантации <br/>организм тяжелобольного <br/>ребенка наиболее уязвим и <br/>подвержен различным <br/>заболеваниям и инфекциям, <br/>клетки полученные при <br/>трансплантации начинают <br/>«включаться» далеко не сразу. <br/>Период реабилитации <br/>начинается после пересадки <br/>костного мозга. Поскольку<br/> имму...</p>
                  </div>
                </div>

стили для этого

.sec_04__cards {
    display: flex;
    justify-content: center;
    align-self: center;
    flex-wrap: wrap;
}
.sec_04__card {
    position: relative;
    cursor: pointer;
    display: block;
    width: 274px;
    height: 440px;
    background-color: white;
    padding-left: 20px;
    padding-top: 25px;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    transition: all 0.5s;
    box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

и добавил js кода

$('.slider').slick({
 dots: true,
 infinite: false,
 speed: 300,
 slidesToShow: 4,
 slidesToScroll: 4,
 responsive: [
   {
     breakpoint: 1024,
     settings: {
       slidesToShow: 3,
       slidesToScroll: 3,
       infinite: true,
       dots: true
     }
   },
   {
     breakpoint: 600,
     settings: {
       slidesToShow: 2,
       slidesToScroll: 2
     }
   },
   {
     breakpoint: 480,
     settings: {
       slidesToShow: 1,
       slidesToScroll: 1
     }
   }
 ]
});

пробовал убирать/добавлять стили но в итоге так и так получалось вот такое:

Никак не получается реализовать нормальный слайдер

БЛОГ НА HUSL

Как реализовать здесь слайдер с помощью slick

Ответы (0 шт):