Как переключить slick slide с transform?

Question

[spacekk]

Использую slick slider с переключением слайдов с fade эффектом. Не получается сделать так, чтобы активный слайд появлялся из opacity и "выезжал" снизу. Как это сделать?

<div class="slider">
          <div class="slick-slide">
            <div class="pic"></div>
            <p>description</p>
          </div>
           <div class="slick-slide">
            <div class="pic"></div>
            <p>description</p>
          </div>
           <div class="slick-slide">
            <div class="pic"></div>
            <p>description</p>
          </div>
        </div>

.pic{
  width: 50px;
  height: 50px;
  background: red;
}

.slick-slide{
  transition: .2s;
  transform: translateY(-50px);
}

.slick-active{
  transform: translateY(0);
}

$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
 fade: true,
arrows: false
});

Answer 1

[aftar]

пропиши в настройках vertical: true