今天开始做轮播，但是用原生js来写特别麻烦，何况我是一名js小白。。。
实习的第一天，boss让我们实习生做公司的官网首页，而基础上所有的首页都是带自动轮播效果的，对我来说真是头大，因为刚学js不久。到下班了，还是没能写出来。看到和我一起的实习生写出了轮播效果，下班后我就问他，是怎么做到的，得到了插件的答案。
回家后上网上查找，看到了Swiper，于是我的第一个轮播图就做出来了（ps：这也是我的第一篇博客）。
话不多说，首先找到Swiper官网：/
然后获取Swiper，下载Swiper。
在教程里面有详细的使用方法。
1.下载Swiper后，进行解压。复制swiper-4.5.0\dist\css目录下的swiper.min.css文件和swiper-4.5.0\dist\js目录下的swiper.min.js文件粘贴到我们项目里的css和js目录下，然后在html里分别引用。
<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/><script type="text/javascript" src="js/swiper.min.js" ></script>
2.将以下内容复制到html中：
<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">轮播图片1</div><div class="swiper-slide">轮播图片2</div><div class="swiper-slide">轮播图片3</div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果需要滚动条 --><div class="swiper-scrollbar"></div></div>
3.给它设置大小
.swiper-container {高宽。。。}
4.还需要对Swiper进行初始化
window.onload = function() {var mySwiper = new Swiper ('.swiper-container', {direction: 'horizontal', // vertical垂直切换选项 horizontal横向切换选项loop: true, // 循环模式选项// 如果需要分页器pagination: {el: '.swiper-pagination',},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 如果需要滚动条scrollbar: {el: '.swiper-scrollbar',},}) }
完成以上4步，就成功用Swiper做出了轮播图，是不是非常简单。
注：本文参考Swiper使用教程。
