Как сделать, чтобы каждый последующий слайд отображался сзади текущего?

Question

Использую Slick Slider.

Создал слайдер с вертикальным скроллом, теперь встал вопрос, как сделать эффект "перевернутой карточной колоды", подробнее нарисовал на рисунке.

Пытался играться с помощью z-index, margin, position: absolute;, но в итоге понял, что тут что-то другое. Прошу поделиться опытом, спасибо заранее.

jQuery(document).ready(function($) {
  
  $('.card-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    dots: true,
    infinite: false,
    arrows: false,
        vertical: true,
        verticalSwiping: true,
});
  
  
  });

.card-slide {
  height: 300px !important;
  border: 1px solid black !important;
  width: 500px !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  font-size: 28px;
}
.card-slider {
  width: 550px;
}

<div class="card-slider">
  <div class="card-slide" style="background: yellow;">
    <span>Серия 1</span>
  </div>
  <div class="card-slide" style="background: orange;">
    <span>Серия 2</span>
  </div>
    <div class="card-slide" style="background: violet;">
    <span>Серия 3</span>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet"/>

БЛОГ НА HUSL

Как сделать, чтобы каждый последующий слайд отображался сзади текущего?

Ответы (0 шт):