Swiper中文网学习交流群:418951634
Swiper3.x已经推出
学习Swiper,逆袭高富帅,迎娶白富美

Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端,以及PC端网站。


Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!


右侧范例来自某讯网,用到了这些特效:

Swiper拥有简单又好用的插件

Swiper拥有Smooth Progress插件、3D flow插件和Scrollbar插件。

这些插件可以实现更复杂的效果,而制作这些效果的过程却很简单。


合理的利用Swiper的插件可以加速开发,这会让你的老板对你的工作效率大加赞赏!


右侧范例用到了这些特效:

或许你在使用Swiper时希望加入一些3d效果

SwipersetTransformsetTransition以及setTranslate函数可以制作3d变形。

Smooth Progress插件可以帮助你获取到滑块的排序索引。


如果你不想花太多时间开发,Swiper还准备了一个现成的插件3D flow供你使用,当然你无法随意改变它的表现形式!


右侧3d宣传册范例用到了这些特效:

Swiper 特色功能

1:1 触摸比例
Swiper默认为1:1 触摸比例,比例可以自定义。(通过修改touchRatio
模仿触控
能让鼠标也支持触摸滑动效果,可以在PC端也能滑动起来,也就是支持在电脑端鼠标拖动
水平/垂直方向
Swiper可以设定向两个方向运动,水平方向(horizontal)以及垂直方向(vertical)
旋转调整
Swiper 在移动设备旋转后可以自适应尺寸,可以自动根据设备旋转和缩放。
响应比例
能使用百分比的宽高定义内容块,为移动端提供不同的解决方案。
抵抗反弹
当滑动滑块超过最左以及最右(最上或最下)的位置时触发的抵御机制
内建分页控制
Swiper能够快速生成内建的分页器(pagination)。
自动播放
只用设置延迟时间,Swiper就会自动地轮播slides直到你触碰该滑块为止。
循环模式
在这种模式下,你能够无限滑动滑块,到最后一个之后又会跳回到第一个。
嵌套Swiper
能够将Swiper嵌套入各种不同的Swiper 的slide里,例如垂直的或水平的。
任意HTML 标签
可以将任意内容放到slide里,不止仅限于图像。
硬件加速
swiper 使用硬件加速技术(如果该移动设备支持的话)能够得到良好流畅的动画效果以及优美的外观,尤其是在IOS设备里。
配置灵活
Swiper在初始化的时候能够设定多个参数以便让其更加的灵活。例如滑动的速度,方向,以及模式等。
良好的兼容性
Swiper支持移动端的Safari,Android 2.1+,windows Phone 8,以及PC端的Chrome,Firefox,IE7-10 和 Opera
独立性
Swiper不依赖像jQuery那样的js类库,因此能够让Swiper更加的小型以及快速。
超轻量级
压缩后仅仅10KB左右。