Как сделать чтобы при прокрутки у первого слайда была другая высота?

Question

[kaidos]

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

<div class="slider">     

    <div class="slide slider__item">
        <div class="slider__item__background">
            <img src="img/portfolio/dev/work1.png" alt="">
        </div>
    </div>

    <div class="slide slider__item">
        <div class="slider__item__background">
            <img src="img/portfolio/dev/work2.png" alt="">
        </div>
    </div>

    <div class="slide slider__item">
        <div class="slider__item__background">
            <img src="img/portfolio/dev/work1.png" alt="">
        </div>
    </div>

</div>

$('.slider').slick({
  infinite: true,
  slidesToShow: 4,
  slidesToScroll: 1,
  variableWidth: true,
  arrows:true,
  prevArrow: $('.slider__arrow--prev'),
  nextArrow: $('.slider__arrow--next'),
});