移动端触摸滑动插件Swiper使用指南
Swiper是一款开源、免费、功能十分强大的移动端内容触摸滑动插件，目前的最新版本是Swiper4。Swiper主要面向的是手机、平板电脑等移动设备，帮助开发者轻松实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。本文简单介绍一下Swiper的使用方法。
下载和安装Swiper
首先我们需要下载Swiper的相关文件：
我们可以直接从代码仓库中下载。
或者通过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的功能确实比较强大，还有很多高级的配置，大家可以在（英文）中了解。下面附上API文档的章节目录：
Swiper API Docs
Swiper Components
上一篇： 第1章 认识jQuery
下一篇： *拖拽元素,实现*排序