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

posted @ 2018-07-16 15:48 zhangyin88 阅读(...) 评论(...) 编辑 收藏