1

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

Вот, что сейчас: введите сюда описание изображения

Вот, что нужно: введите сюда описание изображения

Код:

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

3
  • Клоны создаются для цикличной прокрутки, которая по умолчанию активна, нужно установить infinite: false, лишние слайды исчезнут, но и возможность цикличной прокрутки в таком случае тоже)
    – kost1k
    22 дек 2020 в 17:39
  • @kost1k А как сделать так, чтобы активный слайд был по центру, а не первым?
    – markus
    22 дек 2020 в 17:41
  • Можно использовать и swiper, он более актуален сейчас. Но вроде можно и слик привести к нужному виду, делаешь slidesToShow: 3, по центру он и сейчас должен быть т.к. установлен centerMode: true. Дальше как приведешь стили к макету и 3 слайда будут занимать весь контейнер, то лишних слайдов не будет видно.
    – kost1k
    22 дек 2020 в 17:53

1 ответ 1

2

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

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

3
  • После переключения второго слайда, третий анимируется не сразу. Не знаете как это исправить?
    – markus
    23 дек 2020 в 7:31
  • @markus Это слик так перерисовывет блоки в момент перехода на новый круг при цикличной прокрутке. Маловероятно, что здесь получится что-то сделать, по крайней мере очевидных решений не знаю.
    – kost1k
    24 дек 2020 в 2:52
  • Можно ли сделать как-то без цикличной прокрутки? Я пробовал, но у меня потом блок не по центру активный, а сначала строки.
    – markus
    24 дек 2020 в 7:38

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.