移动端触摸滑动插件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