5分钟教你实现轮播图

swiper插件的使用

在现今互联网时代基本上有很多人现在都用过网上购物了，在这个背景下，越来越多的电商企业发展壮大
而常逛电商网站的伙伴就知道，在这些电商网站上基本少不了一个特效-轮播图
那么关于轮播图的实现有很多中方法，今天我们就拿出来一个非常简单，易使用的分享给各位伙伴们

1

下载，安装

官网地址：https://www.swiper.com.cn/

下载（swiper有很多版本这里拿swiper3做演示）

点击下载swiper3，进入到下载界面

里面有很多文件，可以选择全部下载，或者npm 的形式以及cdn的形式，怎么下，下哪些

可以自己选择，但我们这里不能少的是这俩个

2

使用

 下载之后我们该如何使用呢，我们拿小米商城首页做案例

1. 引入我们的文件

我们只需要引入一个css文件和一个js文件就可以使用了

1. 引入之后，接着就开始我们的下一步

需要注意的是，我们在使用swiper时，命名要跟官网上的api一致，如果想修改样式，我们再添加一个class名就行

1. 引入进来之后接着就是我们的js部分了

里面有很多的api，这里一般是我们常使用的

接着来看效果图

这样我们这个轮播图就完成了，是不是非常简单高效呢

  总结:

 Swiper插件是非常简单，高效的搭建轮播图的一个插件，不仅适用于pc端也同  样适用于移动端，因此很多大型电商网站都会用到它