Как реализовать такого плана слайдер, цетральный слайд больше, чем остальные?

Question

[Gyusss]

Здравствуйте, как сделать такого плана слайдер, через slick css, swiper, что бы центральный слайд был большим с длинной 698px, а остальные были 471px. При изменении слайда, активный должен плавно увеличится и стать нужного размера.

Answer 1

[approximate solution]

На класс active(посмотреть какой класс накидывается на активный слайдер) повесить transform: scale(); иtransition: scale ...

При навешивании активного класса на слайд, будет происходить плавное увеличение.

Comments

[Gyusss]

Слик слайдер при изменении длинны, ломается, может есть слайдер, который работает с динамической длинной слайда?

[approximate solution]

Gyusss, swiper попробуйте

[Антон Литвиненко]

Gyusss, при изменении какой длинны ломается? ничего у него не ломается
слайдам не нужно задавать длину, длина расчитывается динамически от ширины обертки и настроек

[Gyusss]

Антон Литвиненко,

Неправильно реализовал тогда, вот он и поломался, сейчас поправил всё отлично работает.
Единственное, не выходит их к центру свести.
Вызвал слик вот таким вот способом

const mainSlider = () => {
    $('.welcome__slider').slick({
        dots: true,
        infinite: true,
        loop: true,
        speed: 1000,
        slidesToShow: 1,
        centerMode: true,
        variableWidth: true
    });
};

[Антон Литвиненко]

Gyusss, а как это должно работать
slidesToShow: 1,
centerMode: true,

[Gyusss]

Антон Литвиненко, Проблему решил, из-за scale slick-item занимал за собой туже длинну