swiper插件使用——轮播图制作

1. 下载swiper文件

官网下载swiper文件到本地并进行解压，如下图

 注：建议下载最新版本，每个版本类名会有细微区别。如果下载版本非最新版，在下载的文件里找到Demo文件夹打开相应的模板代码进行第3步，否则可能因为类名不同，有些效果显示不出

2. 引入css和js文件

解压后，在文件夹中找到swiper-bundle.min.css和swiper-bundle.min.js两个文件

将swiper-bundle.min.css和swiper-bundle.min.js两个文件分别复制到要创建的轮播图的同目录下的css和js文件夹下，方便引入。

引入css和js文件，在html中head里面引入css；在body里引入js

3. 添加html，css，js内容

swiper官网选择在线演示——>swiper基础演示，挑选你要用到的模板，点击在新窗口打开

 右击选择查看网页源代码，

复制style标签里的css，以及body里的html和js内容

4. 保存并在浏览器中运行，轮播图模板已完成

注：可以将轮播图html代码整体放在一个盒子里面用来控制轮播图大小

5. 加入需要的图片整个轮播图即完成

6. 也可以修改相应css属性进行样式调整，网页中直接选中要修改元素右击检查，选中并复制属性名到html文件添加css属性到最后面，层叠原理将会显示靠后的css语句

 eg：修改按钮以及圆点的颜色，添加css代码如下：

 保存并运行：