Как сделать нестандартный слайдер с помощью 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>
