Как у слайдера динамически менять высоту?

Question

[Александр]

использую библиотеку slick( https://kenwheeler.github.io/slick/) и хочу добиться такого эффекта как на картинке. Что бы у слайдера динамически менялась высота. То есть позиция первого блок с высотой 100px, 2-200px, 3-150px, 4-50px.

Answer 1

[Сергей delphinpro]

Высоту активного слайда нужно взять дефолтной.
Остальные слайды трансформировать transform: scale()

Я не помню точно, какие там классы у слайдов, но примерно будут такие стили:

.slick-slide {
  transform: scale(0.8);
  transition: transform 0.8s ease;
}
.slick-active {
  transform: scale(1);
}
.slick-active + .slick-slide {
  transform: scale(0.9);
}
.slick-active + .slick-slide ~ .slick-slide {
  transform: scale(0.7);
}

Comments

[Александр]

сработало спасибо большое!!!!!