Как сделать нестандартный слайдер с помощью Slick?

Как сделать такой слайдер на JS используя Slick? введите сюда описание изображения

просто установить centermode: true не подходит, так как в начале слайдер должен стоять так

введите сюда описание изображения

собственно сам код

$('.slider-carusel').slick({
  slidesToShow: 1,
  arrows: false,
  centerMode: true,
  dots: true
});
.slider-carusel {
  min-width: 0;
  position: relative;
  overflow: hidden;
  width: 300px;
}
.slider-carusel .carusel__item {
  display: flex;
  justify-content: center;
}
.slider-carusel img {
  width: 241px;
  height: 424px;
  max-width: 241px;
  max-height: 424px;
  -o-object-fit: cover;
     object-fit: cover;
}
.slider-carusel .slick-dots {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}
.slider-carusel .slick-dots button {
  width: 10px;
  height: 10px;
  background-color: #c4c4c4;
  border: none;
  outline: none;
  border-radius: 50%;
  font-size: 0;
  margin: 0 9px;
  cursor: pointer;
  transition: 0.3s;
}
.slider-carusel .slick-dots button:hover {
  background-color: #3da9fc;
}
.slick-track {
  display: flex;
  overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<div class="slider-container">
  <div class="slider-carusel">
    <div class="carusel__item">
      <img src="//i.imgur.com/J7t0Q2N.png" alt="">
    </div>
    <div class="carusel__item">
      <img src="//i.imgur.com/R6v5IPI.png" alt="">
    </div>
    <div class="carusel__item">
      <img src="//i.imgur.com/TDV5uLw.png" alt="">
    </div>
  </div>
</div>


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