Vue3使用Swiper8.x

1.安装Swiper，指定版本

npm install [email protected] --save

2.在所需文件中引入swiper组件

import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';
import { Pagination,Navigation, Autoplay, Scrollbar, A11y } from 'swiper';

3.引入所需样式文件

import 'swiper/swiper.min.css';
import 'swiper/modules/pagination/pagination.min.css'; //轮播图底面的小圆点
import 'swiper/modules/navigation/navigation.min.css'; // 左右切换
import 'swiper/modules/autoplay/autoplay.min.css'; // 自动切换
import 'swiper/modules/scrollbar/scrollbar.min.css'; // 滚动条

4.完整JS：

5.完整template：

6.样式可自定义-改用到样式