带滑动条的Javascript可滑动堆叠的卡

Question

我正在努力实现这样的目标

可以在哪里向上或向下滑动卡片以在滑块中向前或向后移动？

我尝试了这个，但是我迷失了如何使它起作用。

我面临的问题
1.无法达到所需的CSS叠效果
2.在滚动时，所有幻灯片都不会向上滚动，而不会显示列表中的下一张幻灯片。

这是我到目前为止尝试过的-https://codepen.io/arjunmenon/pen/pOdmXB

CSS

.swiper-slide {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s;
  outline: 1px solid transparent;
  backface-visibility: hidden;
  transform-origin: 50% 60%;
  transition: all 0.3s;
  transform: scale(.8);
  box-shadow: 0 5px 20px 1px rgba(0,0,0,0.5);
  z-index: -1;
}

.swiper-slide:first-child {
  -webkit-transform: scale(.7);
  transform: scale(1);
}

.swiper-slide:nth-child(2) {
  -webkit-transform: scale(.8);
  transform: scale(.7);
}

.swiper-slide:nth-child(3) {
  -webkit-transform: scale(.9);
  transform: scale(.8);
}
.swiper-slide-active {
  z-index: 999;
  height: 80vh !important;
  transform: scale(1);
}
.swiper-slide-next {
  z-index: 100;
}