vue+css实现单侧堆叠轮播图卡片模式，整体样式保持不变，点击切换有移动、放大、淡出、淡入等动画效果，网上找了一大堆也没有符合要求的只能手写了，下面是UI图：

实现思路：

1.将list数组[1,2,3]前后各追加1个item，然后用flex布局将card并排展示：

2.设置每个card的左间距和scale大小，隐藏第一个和最后一个：

3.点击左右切换时处理list数组：

if (type == 1) { //下一个
  this.swiperList.push(this.swiperList[2])
  this.swiperList.splice(0, 1)
} else { //上一个
  this.swiperList.unshift(this.swiperList[this.swiperList.length - 3])
  this.swiperList.pop()
}

4.最后使用css：animation添加动画效果就可以了

.swiper-box .swiper-list.swleft .swiper-item:nth-child(2) {
  animation: fadel 0.4s ease-in-out 1; /* 淡入淡出动画持续1秒，使用ease-in-out速度曲线，播放1次 */
}
@keyframes fadel {
  0% { opacity: 1;left: 0; }
  100% { opacity: 0;left: -60px; }
}
...

效果图：

由于项目要求的是固定3个card这里暂时只做了3个，其它数量可以自行修改，下面是完整代码（可以直接运行）：