swiper是一个非常好用的图片切换组件，但是vue3 + swiper8 版本的文档看上去会有点懵逼（一部分是因为版本太多了，一部分是因为很少用）
此处记录下我的使用方法：
安装：
npm i swiper
按照官网来使用：
html部分：（基本上常用的也就这些啦，在复杂的就真的要去啃书啦）
<swiper
// 在swiper标签添加模块属性
:modules="modules"
// 垂直方向轮播 注意一定要有两对引号包裹
:direction="'vertical'"
// 开启循环
:loop="true"
// 页面中一次显示几个图片
:slides-per-view="3"
// 轮播图之间的间距
:space-between="50"
//图片切换速度
:speed="1200"
//切换效果的配置，注意：切换效果在8版本里面需要引入相应的组件，还有相应的css样式
:effect="'fade'"
//是否展示分页器
:navigation="true"
//自动播放的配置
:autoplay="{ delay: 10000, disableOnInteraction: false }"
//图片切换监听
@slideChange="onSlideChange"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
</swiper>
ts部分：
//组件
import { Swiper, SwiperSlide } from 'swiper/vue';
//需要的一些模块：自动播放，分页器，切换动画等等
import { Autoplay, Navigation, Scrollbar ,EffectFade} from 'swiper'
//引入相应的一堆样式
import 'swiper/css';
import 'swiper/css/bundle';
import 'swiper/css/effect-fade';
// 引入swiper核心和所需模块
import { Autoplay, Navigation, Scrollbar ,EffectFade} from 'swiper'
// 在modules加入要使用的模块
const modules = [ Navigation, Scrollbar,EffectFade]
//监听切换
const onSlideChange = (swiper) => {
//返回的swiper会有很多的数据，往往我们只需要一个当前的下标就好了，直接使用下面的就能获取下标，注意此处下标从0开始
swiperIndex.value = swiper.realIndex;
}
附上文档：