参考：Swiper中文网
Swiper使用方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="Swiper-3.4.1/dist/css/swiper.min.css"/>
<style type="text/css">
.swiper-container {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">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>
<!--导航等组件可以放在container之外-->
<script src="js/jquery/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="Swiper-3.4.1/dist/js/swiper.jquery.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical', //水平方向
loop: true, //循环
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
})
</script>
</body>
</html>
1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。
如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js。
2.添加HTML内容。
3.你可能想要给Swiper定义一个大小，当然不要也行。
4.初始化Swiper：最好是挨着</body>标签。
如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。
<script type="text/javascript">
window.onload = function() {
...
}
</script>
或者这样（Jquery和Zepto）
<script type="text/javascript">
$(document).ready(function () {
...
})
</script>
5.完成。恭喜你，现在你的Swiper应该已经能正常切换了，如果没有，你可以参考下这个测试包。现在开始添加各种选项和参数丰富你的Swiper，开启华丽移动前端创作之旅。
*建议不使用Source Map功能，请把js压缩文件最后一行//# sourceMappingURL=maps/swiper.min.js.map 删掉。以免在某些浏览器出现以下提示：
如需要使用Source Map，演示包里面有该map文件，请放在相应的位置
================================================================================
二、选项和参数 介绍：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="Swiper-3.4.1/dist/css/swiper.min.css"/> 7 <style type="text/css"> 8 .swiper-container { 9 width: 600px; 10 height: 300px; 11 } 12 .swiper-slide{ 13 background: blueviolet; 14 color: #FFF; 15 line-height: 300px; 16 font-size: 20px; 17 text-align: center; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="swiper-container"> 23 <div class="swiper-wrapper"> 24 <div class="swiper-slide">Slide 1</div> 25 <div class="swiper-slide">Slide 2</div> 26 <div class="swiper-slide">Slide 3</div> 27 <div class="swiper-slide">Slide 4</div> 28 <div class="swiper-slide">Slide 5</div> 29 <div class="swiper-slide">Slide 6</div> 30 <div class="swiper-slide">Slide 7</div> 31 <div class="swiper-slide">Slide 8</div> 32 </div> 33 <!-- 如果需要分页器(下边的点点) --> 34 <div class="swiper-pagination"></div> 35 36 <!-- 如果需要导航按钮（左右的箭头按钮） --> 37 <div class="swiper-button-prev"></div> 38 <div class="swiper-button-next"></div> 39 40 <!-- 如果需要滚动条（下边的滚动条） --> 41 <div class="swiper-scrollbar"></div> 42 </div> 43 <!--导航等组件可以放在container之外--> 44 <script src="js/jquery/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script> 45 <script src="Swiper-3.4.1/dist/js/swiper.jquery.min.js"></script> 46 <script> 47 var mySwiper = new Swiper ('.swiper-container', { 48 //initialSlide 设定初始化时slide的索引(即开始的位置为第几个)。 49 initialSlide :2, //把第三个作为首个显示 50 51 //direction: Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。 52 //direction:'vertical', //垂直方向滑动 53 direction:"horizontal", //水平方向滑动 54 55 //自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。 56 autoplay : 3000, 57 58 //滑动速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。默认：300 59 speed: 300, 60 61 //设置为true 则开启loop模式 62 loop : true, 63 slidesPerView : "auto", //设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。 64 loopedSlides :8, //在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。 65 66 // 如果需要分页器 67 pagination: '.swiper-pagination', 68 paginationClickable :true, //此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。 69 70 // 如果需要前进后退按钮 71 nextButton: '.swiper-button-next', //前进按钮的css选择器或HTML元素。 72 prevButton: '.swiper-button-prev', //后退按钮的css选择器或HTML元素。 73 74 // 如果需要滚动条 75 scrollbar: '.swiper-scrollbar', //添加滚动条 76 scrollbarHide : false, //滚动条是否自动隐藏。默认：true会自动隐藏。 77 scrollbarDraggable : true , //该参数设置为true时允许拖动滚动条。 78 scrollbarSnapOnRelease : true , //如果设置为true，释放滚动条时slide自动贴合。 79 80 //zoom 81 //焦距功能：双击slide会放大，并且在手机端可双指触摸缩放。 82 //需要在slide中增加类名swiper-zoom-container，结构如下： 83 //<div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="path/to/image"> </div> </div> 84 //zoom : true, 85 86 }) 87 </script> 88 </body> 89 </html>
更多选项-参数请参考：配置选项API
swiper下载链接：下载Swiper