Почему слайдер работает не корректно?

$(document).ready(function() {
  $('.slider__slick-items').slick();
});

.slider {
  background: #F5F8FF;
  min-height: 100vh;
  position: relative;
}

.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 {
  width: 100%;
  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;
}

.slick-next,
.slick-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
}

.slick-next {
  left: 30px;
}

.slick-prev {
  right: 30px;
}


/* Slider */

.slick-slider {
  position: relative;
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir='rtl'] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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">

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