swiper

一了解Swiper

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

特征(feature)

1、1:1触控运动

Swiper默认提供1:1的触控距离,当然,这个比率是可以设置的。(touchRatio)

2、触控模仿

这个功能对于开发桌面网站会很有用。简单来说,就是因为Swiper能够让鼠标事件表现得像触屏事件(点击以及拖曳滑块)

3、水平/垂直

Swiper运动主要有两种模式,horizontal(水平滑动)以及vertical(垂直运动的滑动)

4、自由模式(Free Mode)

这种模式下能够让slides 无需定位,就像通常的滑动条。(看下面的例子)

5、旋转调整 (rotation/resize)

Swiper 在移动设备旋转后能自适应尺寸。

6、响应式

能使用百分比的宽高定义slides,为移动端提供不同的解决方案。

7、滑动阻止

简单来说,就是,只能使用一种模式,水平或者垂直滑动。

8、抵抗反弹(resistant bounds)

Swiper能够提供一种机制,就是当滑动滑块超过最左以及最右(最上或最下)的位置时触发的一种抵御机制。

9、原生要素(native momentum)

有不少的原生东西提供给Swiper。

10、内建分页控制

Swiper能够快速生成内建的分页控制(pagination),指定html 某一标签为pagination,Swiper就能做很多东西了。

11、自动播放

只用设置延迟时间,Swiper就会自动地轮播slides直到你触碰该滑块(touch)为止。

12、循环模式(Loop mode)

该种模式下,你能够无限滑动滑块,到最后一个之后会跳转回第一个。

13、旋转模式(Carousel mode)

Swiper 能够让你在slides父容器下设置你所需要展示的slides数量。

14、滑动容器

在该特征下能够使用Swiper在一些简单的能滑动的区域里,没有slides。在Apps里十分有用。

15、嵌套Swipers

能够将Swipers嵌套入各种不同的Swiper 的slide里,例如垂直的或水平的。

16、任意的HTML 标签

可以将任一的HTML 内容放到slide里,不止仅限于图像。

17、硬件加速

swiper 使用硬件加速技术(如果该移动设备支持的话)能够得到良好流畅的动画效果以及优美的外观,尤其是在IOS设备里。

18、丰富的API

Swiper拥有丰富的API接口。(不过关于中文文档似乎不多,没找着。)能够让开发者生成个人独有的分页器(pagination),上下滑块的按钮以及4个回调函数:onTouchStart,onTouchMove,onTouchEnd,onSlideSwitch。

19、灵活的配置

Swiper在初始化的时候能够接受多个参数以便让其尽可能的灵活。能够配置动画的速度(speed),模式(mode水平抑或垂直的),以及自由模式(free mode)...以及其他..

20、插件API(Plugins API)

Swiper从1.7版本开始就变得强大起来了,因为有更多而简单的插件API允许开发者创造属于自己的Swiper 插件或通过Swiper的核心创制hooks(挂钩)(该官网处提供了几款优秀的插件Swiper smooth progress, Swiper hash navigation,swiper scrollbar)

21、良好的兼容性

Swiper通用性的测试环境:移动端的Safari(iOS5下),Android 2.1+,windows Phone 8,以及最新版本的谷歌浏览器(Chrome),Safari,Firefox,IE10 以及欧朋浏览器(Opera)

22、老版本IE的兼容

Swiper 2.x 开始,通过DOM动画,而非css transitions 兼容IE7 以上(需要包含jQuery),因为IE7不支持css3 transitions....简单来说,支持IE7 以上版本。

23、独立性

Swiper不依赖像jQuery那样的js类库,因此能够让Swiper更加的小型以及快速。所以Swiper能够很安全地应用诸如jQuery、jQuery Mobile,jQTouch等等其他的js类库。

24、超轻量级

压缩后仅仅10KB左右。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335

推荐阅读更多精彩内容

  • 前瞻 今天在修改一个之前的公司项目的时候遇到了手机端引用swiper插件不能多次调用的问题,页面想要实现的效果是选...
    呦丶耍脾气阅读 2,717评论 0 1
  • 当我们在vue项目中使用轮播图插件swiper时,直接引入swiper需要消耗大量资源vue-swiper是swi...
    LYX_Rain阅读 6,265评论 1 2
  • 快速实现图片轮播 /n 了解Swiper 是一款免费以及轻量级的移动设备触控滑块的框架,使用硬件加速过渡(如果该设...
    小葱头ye阅读 1,494评论 0 3
  • github地址: https://github.com/surmon-china/vue-awesome-swi...
    洋__阅读 18,564评论 4 3
  • 飞翔的荷兰人以近乎耻辱的乌龙进球将胜利送给捷克,可即便他们赢的这场比赛,可竞争对手土耳其战胜冰岛将命运掌握在自己手...
    翟建民阅读 442评论 0 1