Swiper 开源免费的移动端触摸滑动插件 Banner 轮播幻灯片插件

Question

Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。主要是为 IOS 而设计的，同时在 Android、WP8 系统以及现代桌面浏览器也有着良好的用户体验。

Swiper 是 一款轻量级的轮播图插件，不仅支持 PC 端更是为移动端而生，用它可以快速地做出一个轮播图，或者扩展使其做出复杂的轮播效果。

基本用法

Swiper 使用需要两个文件，一个是 swiper.css，里面规定了一些在这个滑动轮播插件中常用的样式，当然如果你愿意的话可以自己定义样式 ，另外一个是 swiper.js 这个是插件的主体部分。

在页面中引入这两个文件之后首先要写基本的 html 结构，下面所有的使用方式基于 swiper 4.x

  <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 class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
  </div>

类名为 swiper-container 是滑动轮播插件的包裹器，类似于一个 mask，一个窗口，swiper-wrapper 是一个按照一定顺序排列的所有轮播图的集合，在默认情况下是左右排列，当鼠标或者触屏进行操作的时候，改变的是这个元素的位置，而达到轮播的效果。swiper-slide 则是每个轮播图元素。

在写好基本 html 结构之后，需要对这个轮播图进行初始化

var swiper = new Swiper('.swiper-container');

这样就能生成一个默认的轮播图，可以用鼠标或者触摸屏来进行左右的滑动。

特点

无需加载公用库

Swiper 无需加载任何公共库（如 jquery）即可运行，这保证了 Swiper 的轻量和运行速度。Swiper 也可以在加载了公共库的环境下安全的运行，如 jQuery, Zepto, jQuery Mobile 等

1:1 的触摸滑动

Swiper 默认的触摸比例为 1:1，你可以通过修改 Swiper 的设置来改变这个比例。

监视器

Swiper3 增加了开启监视器的选项，有了这个功能 Swiper 可以在你动态改变 Dom 或 Swiper 的样式时自动重新初始化并计算所需的元素。

丰富的 API

Swiper 拥有丰富的 API，他允许你建立自己独特的分页器、导航、视差滚动、或其他精彩的效果

真正支持 RTL 布局

Swiper 是唯一一个支持 100%RTL 布局的滑动插件。

多行 slides 布局

Swiper 允许多行 Slides 布局，这样每行的 slide 就会较少。

过渡效果

增加了三种新的过渡效果：淡入、3D 方块、3D 流。

两种控制方式

现在 Swiper 可以用来控制其他的 Swiper，甚至可以同时控制。

完整的导航控制

Swiper 带有所有常用的导航控制器，包括分页器，切换箭头，滚动条。

Flexbox 布局

Swiper 使用流行的 flexbox 布局，这样就解决了很多计算尺寸方面的问题。这种布局也允许用 CSS 来设定 Slides。

Flexbox 网格

你可以在 Swiper 初始化的时候设定 slide 的显示，包括每行、每列、每组数量以及他们的间距等。

其他的特性

Swiper3 还包含了所有 swiper2 的牛逼功能，包括自适应、滚动反弹、抵抗反弹、loop 模式、嵌套 Swiper。

以上就是 Swiper 能够做的，应用以上特征就使用原生属性方法能够快速生成令人惊叹的触控接口以及 apps。

• Github 地址： https://github.com/nolimits4web/Swiper/
• 项目地址： http://www.idangero.us/swiper/