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

  • Z时代
  • 2024-01-10
  • 分类：IT

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

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

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

基本用法

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

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

  <divclass="swiper-container">
    <divclass="swiper-wrapper">
      <divclass="swiper-slide">Slide 1</div>
      <divclass="swiper-slide">Slide 2</div>
      <divclass="swiper-slide">Slide 3</div>
      <divclass="swiper-slide">Slide 4</div>
      <divclass="swiper-slide">Slide 5</div>
      <divclass="swiper-slide">Slide 6</div>
      <divclass="swiper-slide">Slide 7</div>
      <divclass="swiper-slide">Slide 8</div>
      <divclass="swiper-slide">Slide 9</div>
      <divclass="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/

以上是 Swiper 开源免费的移动端触摸滑动插件创建 Banner 轮播幻灯片插件 的全部内容， 来源链接： utcz.com/p/232258.html

回到顶部