Swiper是一款開源、免費、功能十分強大的移動端內容觸摸滑動插件，目前的最新版本是Swiper4。Swiper主要面向的是手機、平板電腦等移動設備，幫助開發者輕鬆實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。本文簡單介紹一下Swiper的使用方法。 下載和安裝Swiper 首先我們需要下 ...
Swiper是一款開源、免費、功能十分強大的移動端內容觸摸滑動插件，目前的最新版本是Swiper4。Swiper主要面向的是手機、平板電腦等移動設備，幫助開發者輕鬆實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。本文簡單介紹一下Swiper的使用方法。
下載和安裝Swiper
首先我們需要下載Swiper的相關文件：
我們可以直接從Github代碼倉庫中下載。
或者通過Bower下載：
$ bower install swiper
或者使用Atmosphere將Swiper製作成Meteor包：
$ meteor add nolimits4web:swiper
或者使用NMP（JavaScript包管理工具）下載：
$ npm install swiper
下載壓縮包後解壓，我們需要用到的js文件和css文件都在dist目錄中。
從CDN引用Swiper
如果你不想將Swiper文件資源放到自己的項目中或者伺服器上，那麼可以使用CDN上的資源，這樣可以讓不同地區的用戶有最快的載入速度，也可以減輕你伺服器的負擔，下麵是可用的CDN文件列表：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.esm.bundle.js"></script>
不要忘記將版本號4.x.x替換成自己使用的版本號
將Swiper文件包含到網站中
接下來我們將Swiper的JS文件和CSS文件分別包含到自己的網站或者App中，代碼如下：
<!DOCTYPE html> <html lang="en"> <head> ... <link rel="stylesheet" href="path/to/swiper.min.css"> </head> <body> ... <script src="path/to/swiper.min.js"></script> </body> </html>
為滑塊添加HTML佈局結構
下麵我們創建最基本的佈局：
<!-- Slider main container --> <div class="swiper-container"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- If we need scrollbar --> <div class="swiper-scrollbar"></div> </div>
設置滑塊大小
我們可以為Swiper滑塊自定義大小，通過CSS實現：
.swiper-container { width: 600px; height: 300px; }
初始化
最後我們需要調用Swiper庫初始化滑塊，設置非常方便。
將下麵的代碼添加到<body>末尾：
<body> ... <script> var mySwiper = new Swiper ('.swiper-container', { // Optional parameters direction: 'vertical', loop: true, // If we need pagination pagination: { el: '.swiper-pagination', }, // Navigation arrows navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // And if we need scrollbar scrollbar: { el: '.swiper-scrollbar', }, }) </script> </body>
如果你使用jQuery庫，那麼上面這段初始化的代碼可以放在頁面任何位置，但必須在document.ready代碼塊中調用。示例代碼如下：
$(document).ready(function () { //initialize swiper when document ready var mySwiper = new Swiper ('.swiper-container', { // Optional parameters direction: 'vertical', loop: true }) });
或者在window.onload方法中調用（不推薦）：
window.onload = function () { //initialize swiper when document ready var mySwiper = new Swiper ('.swiper-container', { // Optional parameters direction: 'vertical', loop: true }) };
作為CommonJs模塊
Swiper與CommonJs模塊完全相容，可以在類似Node.js的環境中使用：
var Swiper = require('swiper'); var mySwiper = new Swiper('.swiper-container', { /* ... */ });
作為ES模塊
Swiper包附帶ES模塊版本，可以在支持ES的地方使用，也可以與Webpack或Rollup等捆綁一起使用：
import Swiper from 'swiper'; var mySwiper = new Swiper('.swiper-container', { /* ... */ });
Swiper的功能確實比較強大，還有很多高級的配置，大家可以在Swiper API文檔（英文）中瞭解。下麵附上API文檔的章節目錄：
Swiper API Docs
Swiper Components
- Navigation
- Pagination
- Scrollbar
- Autoplay
- Parallax
- Lazy Loading
- Effects
- Zoom
- Keyboard And Mousewheel Control
- Virtual Slides
- Hash Navigation
- History Navigation
- Controller
- Accessibility
