Swiper是一个成熟的轮播图插件，目前版本已经迭代到了7，个人选择的是3.4.2版本,新手能跑起来就是万幸,过多的功能反而容易乱花渐欲迷人眼。以Wordpress为例，首先插入必要的组件，小服务器配置较低，所有能外部引用的都交给了cdn，在head部位插入如下语句：
<link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/Swiper/3.4.2/css/swiper.min.css"/>
<script type="application/javascript" src="https://cdn.staticfile.org/Swiper/3.4.2/js/swiper.min.js"></script>
轮播部位html，在body部位插入如下语句：
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide">slider1</div>
<div class="swiper-slide red-slide">slider2</div>
<div class="swiper-slide orange-slide">slider3</div>
</div>
<div class="swiper-pagination"></div>
</div>
展示用的css语句让效果更明显：
<style>
.swiper-slide {
line-height: 300px;
color: #fff;
font-size: 36px;
text-align: center;
}
.swiper-pagination-bullet-active{
background-color:white;
}
.blue-slide {
background: #4390EE;
}
.red-slide {
background: #CA4040;
}
.orange-slide {
background: #FF8604;
}
</style>
最后用swiper语法启动组件：
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
loop: true,
autoplay: 3000,
pagination : '.swiper-pagination',
paginationClickable :true,
});
</script>
