环境

"swiper": "^8.2.2",
"vue": "^3.2.25",

代码

<swiper 
    :grabCursor="true" // 鼠标覆盖Swiper 时指针会变成手掌形状，拖动时指针会变成抓手形状。
    :modules="modules" // 引入模块
    :effect="'cards'" // 必须设置成卡片
    >
    <swiper-slide v-for="(i, index) in imgs" :key="i.id">
        ...
    </swiper-slide>
</swiper>

// 导入样式
import { Swiper, SwiperSlide } from "swiper/vue";
import { EffectCards } from "swiper";
import "swiper/less";
import "swiper/css/effect-cards";

const modules: Array<any> = [EffectCards];

// 自定义样式
.swiper { // 需要设置下长宽
  width: 300px;
  height: 450px;
}

.swiper-slide { // 这个随意吧，自己看着设置
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
}

最终效果

参考地址

个人博客