Swiper的安装及使用

你还在为轮播图没写完而伤心吗？你还在为你轮播图里没处理完的bug而难过吗？好消息，好消息，好消息，我们有一个专门的插件可以帮助我们去写轮播图，我们再也不用亲自去写代码了它就是Swiper

Swiper官方网址：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

现如今Swiper版本已经更新到第八个版本，在Vue2中不建议使用最新的版本，Vue2使用第五个版本相对于来说比较好用当然6-7-8版本也可以，7和8版本主要针对Vue3，所以说在Vue2中5的版本用的比较多 

进入Swiper下载网址：下载Swiper - Swiper中文网

下载解压完成后可以在线演示基础演示中查看每个示例轮播图所对应的编码号，然后返回已下载好的Swiper中找到demo文件夹进入可以查看在官网中所看到的轮播图对应编码在demo文件中找对应的编码找到并打开浏览器，进入浏览器右键查看网页源代码复制HTML部分代码和CSS代码以及JavaScript代码复制过去，并且找到相关的Swiper.css和Swiper.js文件夹复制到自己的文件夹下并引入即可使用轮播图：

引入Swiper,css文件：

<link rel="stylesheet" type="text/css" href="css/swiper.css">

引入Swiper.js文件：

<script type="text/javascript" src="js/swiper.js"></script>

在Vue中Swiper 插件只能通过NPM作为Swiper主库的一部分使用: 

在项目中下载Swiper包：npm i swiper@5

以下是一个完全由Swiper做出来的一个分组跳过效果的一个轮播图效果图如下所展示：

HTML代码：

<!-- Swiper -->
<div class="swiper mySwiper">
	<div class="swiper-wrapper