Всего должно быть три айтема и центральный меняется внешне, но почему-то добавляется ещё клоны и не могу понять почему.
Код:
$('.slider').slick({
centerMode: true,
slidesToShow: 1,
variableWidth: true
});
.slider {
display: flex;
justify-content: center;
margin-top: 143px;
}
.slider-item {
position: relative;
}
.slider-img {
width: 307px;
height: 181px;
}
.mask-img {
position: absolute;
top: 15px;
left: 16px;
background: linear-gradient(0deg, rgba(80, 105, 70, 0.65), rgba(80, 105, 70, 0.65));
box-shadow: 0px -4px 22px rgba(0, 0, 0, 0.2);
width: 275px;
height: 152px;
}
.button-play {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 118px;
height: 118px;
background: rgba(0, 0, 0, 0.57);
border-radius: 50%;
z-index: 1;
cursor: pointer;
}
.arrow {
position: absolute;
top: 50%;
left: 53%;
transform: translate(-50%, -50%);
}
/*Active
--------------------*/
.slick-center {
transform: scale(1.25);
z-index: 1;
}
.slick-center .mask-img {
display: none;
}
.slick-center .button-play {
display: block;
}
.slider-img-active {
width: 401px;
height: 237px;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet"/>
<div class="slider">
<div class="slider-item">
<div class="button-play">
<img src="img/arrow.svg" alt="" class="arrow">
</div>
<div class="mask-img"></div>
<img src="img/preview.png" alt="" class="slider-img">
</div>
<div class="slider-item">
<div class="button-play">
<img src="img/arrow.svg" alt="" class="arrow">
</div>
<div class="mask-img"></div>
<img src="img/preview.png" alt="" class="slider-img">
</div>
<div class="slider-item">
<div class="button-play">
<img src="img/arrow.svg" alt="" class="arrow">
</div>
<div class="mask-img"></div>
<img src="img/preview.png" alt="" class="slider-img">
</div>
</div>