Javascript可刷卡堆叠卡，带刷卡器滑块

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

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

我试过这个，但我不知道如何使它工作

我面临的问题
1.无法实现所需的css堆栈效果
2.滚动时，所有幻灯片只向上滚动，而不显示列表中的下一张幻灯片

这就是我到目前为止尝试过的-

CSS

---

感谢您提供codepen.io。问题解决了吗？使用Swiper，没有。此时，库作者可能不希望支持此功能，但基于卡片的布局可以提供良好的用户体验。

.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;
}