jQuery教程移动端触摸滑动插件Swiper使用详解-职坐标

jQuery教程移动端触摸滑动插件Swiper使用详解

沉沙 2018-09-18 来源：阅读 980 评论 0

摘要：本篇教程介绍了jQuery教程移动端触摸滑动插件Swiper使用详解，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

本篇教程介绍了jQuery教程移动端触摸滑动插件Swiper使用详解，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

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布局结构
下面我们创建最基本的布局：


<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>

设置滑块大小
我们可以为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文档（英文）中了解。