老徐WEB：swiper插件实现图片滚动轮播图（三）

老徐看到网上有用swiper来实现轮播图的，就研究了下。发现swiper挺简单的，事例介绍清晰，文档容易理解，就试着做了一个网站常用的轮播图。swiper官网提供了很多事例，有简单实用的，也有很炫的，根据自己的需要选择相应的样式。

如果对轮播图原理和制作过程不熟悉的，可以看看老徐之前的相关轮播图的两篇文章，【最简单详细的轮播图原理和制作过程】和【JS简单实现图片滚动效果轮播图，自动和手动】。

用swiper实现的轮播图效果如下：

 

下面详细介绍下swiper轮播图制作过程。

首先引入swiper官方的CSS和JS文件，可以去官方网站下载。

<link rel="stylesheet" href="./css/swiper.min.css" >
<script src="./js/swiper.min.js"></script>

 

然后搭建HTML结构。代码不多，容易理解，只是结构和类名不能更改。左右按钮和分页在此示例里都已经添加了，满足工作中常用