Swiper slider 具有硬件加速的移动端触摸滑块插件

前端之家收集整理的这篇文章主要介绍了Swiper slider 具有硬件加速的移动端触摸滑块插件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<table class="text"><tr class="li1">
<td class="ln"><pre class="de1">1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

幻灯片插件, 不但能够适用于各种操作系统的手机,还能够利用HTML5的硬件加速功 能来完成滑块的切换效果,其效果以及实用性非常强。 该插件原主要适用于iOS的设计,但也适用于Android、Windows Phone和 最新的桌面浏览器,当然也可以使用在APP上,如微信、QQ等等 一、Swiper的特点   下面就为大家介绍下该插件的特点:   1、1:1 触控运动 Swiper默认为1:1的触控距离,比率可以自定义。   2、触控模拟 能让鼠标也支持触摸滑动效果,可以在PC端也能滑动起来,也就是支持在电脑端鼠标滑动。   3、水平或垂直 有两种运动模式,horizontal(水平滑动)以及vertical(垂直滑动)。   4、自由模式 能够让slides无需定位,就像通常的滑动条。(可以在演示地址体验)   5、旋转调整 Swiper 在移动设备旋转后可以自适应尺寸,可以自动根据设备旋转和缩放。   6、响应式布局 slides的高度使用百分比来设置,从而解决不同移动端的适配。   7、滑动阻止 会自动限制一种模式,水平或者垂直。   8、滑块反弹 反弹机制,当滑块到达最左或者最右(最上或者最下)的位置时,会触发回弹效果。   9、原生动态 使用原生的转换效果,html5动画属性。   10、内置分页控制 能自动生成分页控制机制,可以指定控制器的标签pagination。   11、自动播放 Swiper可以设置自动播放,以及自动播放的延迟时间。   12、循环模式 可以自由设置开启和关闭,开启后,能够无限的播放幻灯片,到了最后一个位置时,会切换回第一个(无缝切换)。   13、旋转模式 能够让你在slides父容器下设置你所需要展示的slides数量来旋转播放。   14、滚动容器 该功能可以在容器里面滚动内容(不是指幻灯片,而是幻灯片里面的内容滚动),特别适用于APP的开发效果。   15、嵌套幻灯片 能够将swiper嵌套入各种不同的Swiper的slide里面,例如第一个slide里面可以放在一个水平的,而第二个slide里面可以放置垂直的。   16、放置HTML标签幻灯片插件,不只是允许放置图片标签,而且可以放置任意的HTML标签,例如文本、视频等等。   17、硬件加速 swiper可以使用设备硬件加速技术,能大幅度的改善动画效果以及优美的流畅性,特别是在IOS系统里面表现的更加完美(硬件加速需要设备支持)。   18、丰富的API接口 swiper拥有着非常丰富的api接口,例如:onTouchStart、onTouchMove、onTouchEnd、onSlideSwitc、autoplay等等。   19、灵活的配置 Swiper在初始化的时候能够接受多个参数,可以非常灵活的配置插件效果。   20、插件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的兼容 能够兼容IE7以上的版本,在IE7中使用的DOM动画,而非css transitions切换,所以需要引入jQuery。   23、独立性 Swiper不依赖像jQuery那样的js类库,这样子Swiper会更加的小型以及快速,从而使用不同的手机设备环境。但Swiper也能很安全地应用诸如jQuery、jQuery Mobile,jQTouch等等其他的js类库。   24、超轻量级 压缩后仅仅10KB左右,独立运行,不依靠第三方类库。   看完之后是不是感觉很激动?基本上此插件可以完成大部分的移动滑块的需求了。 原文链接:https://www.f2er.com/note/421773.html

猜你在找的程序笔记相关文章