$(document).ready(function () {
$('.slider__slick-items').slick();
});
.slider {
background: #F5F8FF;
min-height: 865px;
}
.slider .suptitle {
text-align: center;
padding: 104px 0 20px 0;
}
.slider .title {
font-weight: normal;
font-size: 36px;
line-height: 45px;
text-align: center;
color: #3D4F9F;
margin-bottom: 92px;
}
.slider .slider__item {
display: flex;
width: 958px !important;
background: #FFFFFF;
border: 1px solid #D8E3FE;
box-shadow: 0px 15px 50px #EFF4FF;
padding: 70px 41px 64px 35px;
margin: 0 auto;
max-height: 394px;
}
.slider .slider__item .item__images {
position: relative;
width: 50%;
}
.slider .slider__item .item__content {
width: 50%;
}
.slider .slider__item .item__content .description {
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 27px;
letter-spacing: 0.03em;
color: #8D96BD;
margin-bottom: 71px;
max-width: 408px;
text-align: left;
}
.slider .slider__item .item__content .slider-title {
margin-bottom: 32px;
font-style: normal;
font-weight: normal;
font-size: 36px;
line-height: 45px;
text-align-last: left;
color: #3D4F9F;
}
.slider .slider__item .item__content .btn-get {
margin-right: 44px;
display: inline-block;
}
.slider .slider__item .item__content .add-btn {
font-family: Quicksand;
color: #A6B6DA;
font-style: normal;
font-weight: bold;
font-size: 13px;
line-height: 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/global.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&family=Quicksand:wght@300;500&family=Roboto:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<section class="slider">
<div class="suptitle">OUR RESOURCES</div>
<div class="title">Start reading our blog</div>
<div class="slider__slick-items">
<div class="slider__item">
<div class="item__images"></div>
<div class="item__content">
<div class="slick-title">How to start planning</div>
<div class="description">
Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti. Natum petentium principes mei ea. Tota everti periculis vis ei, quas tibique pro at, eos ut decore ...
</div>
<a href="#" class="btn-get">Read now</a>
<a href="#" class="add-btn">Add to your bookmarks</a>
</div>
</div>
<div class="slider__item">
<div class="item__images"></div>
<div class="item__content">
<div class="slick-title">How to start planning</div>
<div class="description">
Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti. Natum petentium principes mei ea. Tota everti periculis vis ei, quas tibique pro at, eos ut decore ...
</div>
<a href="#" class="btn-get">Read now</a>
<a href="#" class="add-btn">Add to your bookmarks</a>
</div>
</div>
<div class="slider__item">
<div class="item__images"></div>
<div class="item__content">
<div class="slick-title">How to start planning</div>
<div class="description">
Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti. Natum petentium principes mei ea. Tota everti periculis vis ei, quas tibique pro at, eos ut decore ...
</div>
<a href="#" class="btn-get">Read now</a>
<a href="#" class="add-btn">Add to your bookmarks</a>
</div>
</div>
</div>
<script type="text/javascript" src="js/slick.min.js"></script>
<script type="text/javascript" src="js/script.min.js"></script>
</body>
</html>
Все слайды перелистываются как один. Заранее спасибо https://glitch.com/edit/#!/join/419b83a8-da81-4aa5-b561-741e33857a5d