Как убрать клонированые слайды в slick?

Question

Всего должно быть три айтема и центральный меняется внешне, но почему-то добавляется ещё клоны и не могу понять почему.

Вот, что сейчас:

Вот, что нужно:

Код:

$('.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>

Answer 1

Вроде что-то подобное, но корректного отображения получится добиться только с фиксированной шириной слайдов, чтобы при этом она была равна ширине контента. По этому с адаптивом будем проблематично.

$('.slider').slick({
    centerMode: true,
    slidesToShow: 1,
    variableWidth: true
});

.slider {
  width: 900px;
  margin: 100px auto 0;
}

.slider .slick-track {
  padding: 40px 0;
}

.slider-item {
    position: relative;
    width: 300px;
    transition: transform 0.3s;
}

.slider-img {
    width: 100%;
    min-height: 200px;
    background-color: yellow;
}

.mask-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    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);
    opacity: 0.5;
}

.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: 50%;
    transform: translate(-50%, -50%);
}

/*Active
--------------------*/
.slider-item.slick-current {
    transform: scale(1.5);
    z-index: 1;
    transition: transform 0.3s 0.3s;
}

.slider-item.slick-current .mask-img {
    display: none;
}

.slider-item.slick-current .button-play {
    display: block;
}

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

БЛОГ НА HUSL

Как убрать клонированые слайды в slick?

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