參考：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