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

Question

[ishimskayamahorka14]

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

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

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

Answer 1

[Арсений Матыцин]

Позиционирование, трансформации (translate, scale) и z-index.

Comments

[ishimskayamahorka14]

Арсений, благодарю за ответ!
Подскажите, не могу додуматься как задать привязку для слайдов.
Например, у нас должен быть каждый последующий меньше + планирую прозрачнее.
Для этого нужна какая-либо привязка. Не подскажете, как можно осуществить?

[Арсений Матыцин]

damarkuzz, смотря, как выводишь, скорее всего чистоганом, поэтому помочь может nth-child. Ну или цикличный селектор.

Край, если совсем скучно, можно попробовать вложенные списки и на них завязать привязку цикличную. Это так, для фана, не более.

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