1、下载Swiper插件
在浏览器中输入并搜索Swiper，找到并打开Swiper.js官方网站，下载Swiper插件
2、解压下载好的Swiper压缩包，打开“dist”文件夹里面css和文件夹，把swiper.css和swiper.js复制到你的项目文件夹中。
3、引用插件swiper.css和swiper.js在HTML头部<head>中引用swiper.css，在<body>最后面引用swiper.js
4、运用HTML样式布局
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#"><img src="images/adv01.png"></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="images/adv02.png"></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="images/adv03.png"></a>
</div>
<div class="swiper-slide">
<a href="#"><img src="images/adv04.png"></a>
</div>
</div>
<div class="pagination"></div> <!--分页小圆点-->
</div>
5、swiper初始化
在swiper.js后添加js样式
<script type="text/javascript">
var mySwiper = new Swiper('.banner-container',{
loop: true, //用来循环播放
pagination: '.banner-pagination', //显示焦点按钮
paginationClickable: '.banner-pagination', //焦点按钮可点击
});
</script>
6、此时，轮播图已经完成，效果如图所示
