Swiper使用说明
来源:互联网 发布:unity3d汉化版 编辑:程序博客网 时间:2024/05/18 22:09
特征(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左右。
以上,就是Swiper能够做的,应用以上特征就使用原生属性方法能够快速生成令人惊叹的触控接口以及apps。
Usage:
1、下载swiper最新版本https://github.com/nolimits4web/Swiper
2、在HTML Head中添加Swiper's CSS and JS:
<head> ....<link rel="stylesheet" href="path_to_css/idangerous.swiper.css"><script defer src="path_to_js/idangerous.swiper-2.x.min.js"></script> ....</head>
其中引用的文件名以下载的为准。
3、使用下面的HTML布局
<div class="swiper-container"><div class="swiper-wrapper"><!--First Slide--><div class="swiper-slide"><!-- 这里添加第一个HTML内容 --></div> <!--Second Slide--><div class="swiper-slide"><!-- 这里添加第二个HTML内容 --></div><!--Third Slide--><div class="swiper-slide"><!-- 这里添加第三个HTML内容 --></div><!--Etc..--></div></div>
4、打开下载的文件中的idangerous.swiper.css,设置Swiper's的宽度以及高度(在文件的末尾)
/* 指定swiper 容器尺寸: */
.swiper-container, .swiper-slide { width: 500px; height: 200px;}
5、初始化Swiper 在文档开始处,(或在窗口加载时)
<script type="text/javascript"> /* * 使用文档添加事件或窗口加载事件 * 例如: */ window.onload = function() { ...代码 ...} /*或者*/ document.addEventListener('DOMContentLoaded', function(){ ...代码... }, false) window.onload = function() { var mySwiper = new Swiper('.swiper-container',{ //添加需要的选项: mode:'horizontal', loop: true //等等.. }); }</script>
API:
new Swiper(container,options)
container: 字符串要求,Swiper's容器的css选择器。在上面的HTML代码中就必须等于“.swiper-container”;
options:-对象,可选择的。Swiper参数,详情见下:
用法:
var mySwiper = new Swiper(".swiper-container",{ speed:750, mode:"vertical" })
返回拥有众多有用函数(functions)以及方法(methods)的对象:
mySwiper.disableMousewheelControl()-滑动中禁掉鼠标滑轮(mousewheel control)控制
mySwiper.enableMousewheelControl()-能够使用禁掉了的鼠标滑轮
mySwiper.enableKeyboardControl()-滑动中键盘控制可用
mySwiper.disableKeyboardControl()-禁用滑动中键盘控制
mySwiper.swipeNext()-执行过渡动画到下一滑块(slide)(简单来说就是滑动到下一个页面)
mySwiper.swipePrev()-执行过渡动画到上一滑块
mySwiper.swipeTo(index,speed,runCallbacks) - 执行过渡到索引下标数字等于传入参数“index”的页面(slide)处,速度为传入的参数“speed”。同时可将“runCallbacks”设置为false(默认为“true”),那么transition(过渡)不会产生onSlideChange回调函数。
mySwiper.browser.ie10 - 返回 “true”如果浏览器为IE10
mySwiper.browser.is8 -返回 “true”如果浏览器为IE8
mySwiper.support.touch -返回 “true”如果浏览器支持触屏
mySwiper.support.transforms -返回 “true”如果浏览器支持css3 transforms(变形)
mySwiper.support.transforms3d -返回 “true”如果浏览器支持css3 3D transforms(变形)
mySwiper.support.transitions -返回 “true”如果浏览器支持css3 transitions(过渡)
mySwiper.activeSlide() - 返回当前活动块(slide)(slide 实例,HTML元素)
mySwiper.clickedSlideIndex - 返回触控/点击块(slide)的索引(数字)。只适用于“onSlideTouch”和“onSlideClick”
回调函数中。
mySwiper.clickedSlide - 返回触控/点击块(slide)(slide实例,HTML元素)。只适于“onSlideTouch”和“onSlideClick”
回调函数中。
mySwiper.activeIndex- 返回当前活动块的索引(number)
mySwiper.activeLoopIndex- 返回当前活动块在loop 模式下的索引(number)
mySwiper.activeLoaderIndex- 返回当前活动块在loader模式下的索引(number)
mySwiper.previousIndex- 返回上一个活动块的索引(number)
mySwiper.startAutoplay()-开始自动播放。应用于自定义“Play”和“Pause”按钮
mySwiper.stopAutoplay()-停止自动播放。应用于自定义“Play”和“Pause”按钮
mySwiper.destroy(removeResizeEvent) -移除所有绑定的事件监听(窗口的尺寸改变事件【如果removeResizeEvent的值不等于“false”】,容器(wrapper)的触控事件,以及文档的鼠标事件),对于添加/移除滑块,页面到文档时非常有用,能够释放浏览器内存。
mySwiper.resizeFix()-调用这个方法当你改变swiper's 的尺寸而没有改变窗口大小时。
mySwiper.reInit()- 重新初始化Swiper。对于动态添加/移除滑块非常有用。
mySwiper.width 返回Swiper容器的宽度
mySwiper.height返回Swiper容器的高度
mySwiper.isTouched 返回布尔值,当触控该slide时返回“true”
mySwiper.positions - 返回包含x,y坐标的wrapper对象
mySwiper.touches - 返回包含触控信息的对象数组
mySwiper.params - 获取对象初始化参数,能够在初始化之后改变/重写该参数,如:
mySwiper.params.speed = 500;
mySwiper.getWrapperTranslate(axis)-返回当前容器“位移(translate)"【css3 transform ->translate】,即x,或y轴的偏移量。”axis“-参数为字符串”x“或”y“,对应于水平模式及垂直模式。
mySwiper.setWrapperTranslate(x,y,z) - 手工设置css3 transform's translate 的值。x,y and z -为数字
mySwiper.wrapperTransitionEnd(callback,permanent) - 使用该方法当Swiper ”transitionEnd“事件触发后能够自定义回调函数(在swipeNext,swipePrev,swipeTo 以及swipeReset 函数之后):
callback-函数(function)。默认状态下(如果permanent 值为false)transitions只执行一次
permanent - boolean . 默认状态下为false,当设置为真时该回调函数callback会执行多次。
选项(options)
Swiper 初始化 支持下列中的参数
Parameter(参数)Type(类型)Default Value(默认值)Example(例子)Description(说明)speednumber300600slides滑块动画之间的持续时间(单位ms)eventTargetstringwrappercontainerswipers事件对象,默认状态下所有的触控事件只能用于wrapper。如若需要其他元素包含在container内以及使用swipers,那么可以使用'container'. 2.4.2版本新增autoplaynumber5000-过渡延迟时间(单位ms),参数没有指定的情况下,不生效,(补充:当用户操作后autoplay失效)autoplayDisableOninteractionbooleantruefalse当设置为false时,用户操作之后(swipes,arrow以及pagination 点击)autoplay不会被禁掉,用户操作之后每次都会重新启动autoplayautoplayStopOnLastbooleanfalsetrue设置为false后autoplay在最后一个块下失效(在没有设置loop的情况下)modestringhorizontalverticalslides滑动方式,水平或垂直loopbooleanfalsetruetrue 为loop模式生效loopAdditionalSlidesnumber02loop模式下slides数量增加个数loopedSlidesnumber12在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数slidesPerViewnumber or 'auto'14旋转模式下,设置slider's容器能够同时显示的slides数量。另外,支持'auto'值,会根据容器container的宽度调整slides数目。‘auto’不兼容loop模式slidesPerViewFitbooleantruefalse仅当已设置了slidesPerView:'auto',以及当slides的宽度大于容器,该参数生效。默认为true然后宽度大的slide 过渡时会划分为边缘的两部分。为false时,slide transition 会划分为比容器container大的多个slidesslidesPerGroupnumber12定义slides的数量多少为一组,在旋转模式下有效。(carousel mode)calculateHeightbooleanfalsetrue当值为true时,Swiper根据slides内容计算容器高度。响应式布局中或不知道slides高度时十分有用(就像响应式的图片)roundLengthsbooleanfalsetrue值为true时,Swiper会四舍五入宽度和高度,在响应式的滑块中包含误差时十分有用。cssWidthAndHeightbooleanfalsetrue值为true以及Swiper中的container,wrapper和slides没有高度updateFormElementsbooleantruefalse当所有的内嵌图像(img标签)加载完成后Swiper会重新初始化。watchActiveIndexbooleanfalsetrue如果启用触屏事件期间会重新动态计算活动块的索引。visiblilityFullfitbooleanfalsetrue如果启用,仅有“可视”的slides会最后适应容器的大小autoResizebooleantruefalse值为false时,窗口尺寸改变时,禁掉slides自适应DOManimationbooleantruefalse在不支持css transitions(IE7-9)的浏览器上是否使用自定义的DOM动画resistanceboolean or "100%"truefalse值为false时禁用resistant bounds(抵抗反弹),设置为‘100%'时启用resistant(抵抗)模式noSwipingboolean or "100%"falsetrue值为true时,当swiper新增类”noSwipingClass“的滑动块时,禁掉该元素的滑动。preventLinksbooleantruefalse启用时当碰触滑块(slides)时禁止<a>标签链接</a>preventLinksPropagationbooleanfalsetrue如滑动过程中需要跟preventLinks一起禁用stopPropagation,设置值为trueinitialSlidenumber20初始块(页面)的索引useCSS3Transformsbooleantruefalse值为false时禁用css3 transforms(减少内存,提高性能,同时也降低了美观),同时使用wrapper的left/top属性代替。
自由模式与滑块容器(Free Mode and Scroll Container)
块(slides)偏移
触屏/鼠标事件效应(Touch/mouse interactions )
Navigation
Pagination(分页器)(指示器)
命名空间namespace
回调函数(Callbacks)
Example
以下需要引用jQuery文件
<script src="js/jquery-1.10.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var mySwiper = $('.swiper-container').swiper({ mode : 'vertical', //选择垂直模式, speed : 500, //设置动画持续时间500ms freeMode : true, //开启自由模式 freeModeFluid : true, //开启'fluid'自由模式 onTouchStart : function() { //触控滑块时执行代码 alert('OMG you touch the slide!') } } })
Callbacks API
从Swiper2.4版本开始增加了一些回调函数,现在添加一些函数到上面。
当初始化Swiper时,旧版本指定回调函数的方式:
$(document).ready(function(){ var mySwiper = new Swiper('.swiper-container',{ mode:'vertical', speed: 600, onSlideChangeStart: function(swiper){ alert('Hello 1'); } }); });
新版本中能够实现无需完全重写onSlideChangeStart参数,可以添加新函数到回调函数中。
mySwiper.addCallback('SlideChangeStart', function(swiper){ alert('Hello 2'); }
你会发觉在过渡动画开始时弹出“Hello 1” 以及“Hello 2“,该种方式下addCallback方法需要注意该回调函数名不包含”on“。
解除(fire)callback 函数语句:
mySwiper.fireCallback('SlideChangEnd',mySwiper);
移除(remove)callbacks:
mySwiper.removeCallback('SlideChangEnd');
Slides API
Swiper提供强大的Slides API,能够动态生成/删除/操作Slides(滑块)
Slide 实例
这个实例是简单的HTML元素但扩展了非常有用的方法。
下面的例子变量mySwiper包含了属性和方法的Swiper对象。
<script type="text/javascript"> $(document).ready(function(){ var mySwiper = $('.swiper-container').swiper({ mode : 'vertical', //切换到垂直模式 speed : 500, //动画持续时间 freeMode : true, //启动自由模式 freeModeFluid : true, //启动'fluid'自由模式 onTouchStart : function() { //触碰滑块是的事件 alert('OMG you touch the slide!') } } })</script>
通过调用一下方法,你能生成Swiper滑块实例:
mySwiper.createSlide(html,slideClassList,element),其中:
html(string[字符型],required[必需的])-生成的滑块的HTML元素的内容
slideClassList(stirng[字符型],optional[可选的])- 创建类”class“属性。缺省值为"swiper-slide "
var mySwiper = $(".swiper-container").swiper({...some optins...}) //创建一个新的swiper实例 var newSlide = mySwiper.createSlide("<p>Here is my new slide</p>"); //生成的HTML滑块:"<div class="swiper-slide"><p>Here is my new slide</p></div>" var newSlide = mySwiper.createSlide("<p>Hello</p>","swiper-slide red-slide","span"); //生成的HTML滑块:"<span class="swiper-slide red-slide"><p>Hello</p></span>
"newSlide"变量包含在新建Slide实例之后,但如今还在内存中,并不在slider中。为了将其添加到slider中,能够使用一下链式方法有效地添加到Slide实例中:
newSlide.append()-添加slide到slider中的最后一个位置。返回Slide实例
newSlide.prepend()-添加slide到slider中的第一个位置。返回Slide实例
newSlide.remove()-移除slide
newSlide.getWidth()-返回slide宽度
newSlide.getHeight()-返回slide高度
newSlide.getOffset()-返回包含滑块left、top偏移量的对象
newSlide.insertAfter(index)[index-number]-插入新滑块到index索引之后。返回Slide实例
newSide.clone()-复制slide到新slide实例。返回新复制的Slide实例
//例子 var mySwiper = $(".swiper-container").swiper({...some optins...}) var newSlide = mySwiper.createSlide("<p>Here is my new slide</p>"); newSlide.append()//newSlide添加到所有已存在的slides后面 var newSlide = mySwiper.createSlide("<p>Hello</p>","swiper-slide red-slide","span"); newSlide.prepend()//-newSlide添加到所有已存在的slides的前面(第一个位置) //复制、插入Slide var clonedSlide = newSlide.clone(); clonedSlide.append(); //crazy 链式 var newSlide = mySwiper.createSlide("<p>Here is my new slide</p>"); newSlide.prepend().clone().append().clone().inertAfter(2) //-新创建的slide被添加到所有已存在的slide前面,然后复制slide并添加到最后,接着在复制添加到index为2的位置上
还有一些有用的方法:
slide.html(innerHTMl)[innerHTMl-string]-工作方式类似于jQuery/Zepto.html()
方法。如果指定innerHTML,那么它会替代原来slide里的inner html内容,然后方法返回slide实例。
如果innerHTML没有指定,返回slide中inner html内容。
slide.index()-返回slide索引
slide.isActive()返回true如果该块是活动的
slide.setData(name,value)[name-string]-存储数据方法,能够存储所有类型变量-数组,对象,数字,字符等等
slide.getData(name)[name-string]返回存储的变量值
slide.data(name,value)[name-string,value-string]-保存变量值到data-[name]属性中
slide.data(name)[name-string]-返回data-[name]属性值
//例子 var mySwiper = $('.swiper-container').swiper({...some options...}) //创建slide实例 var newSlide = mySwiper.createSlide('<p>Here is my new slide</p>'); newSlide.append().clone().html('<p>New HTML</p>').prepend() // 新创建的slide被添加到最后,然后复制该slide并添加html内容,最后插入到第一个位置 var newSlide = mySwiper.createSlide('<p>Here is my new slide</p>'); alert(newSlide.html()) // -> <p>Here is my new slide</p> Store/Get data: newSlide.prepend().setData('apples',['iMac', 'MacBook Pro', 'iPhone', 'iPad']) newSlide.getData('apples') // -> ['iMac', 'MacBook Pro', 'iPhone', 'iPad'] newSlide.data('apple','iPad'); newSlide.data('apple');Swiper Slides
看看swiper是如何操作存在的slides(添加/移除)
mySwiper.slides-slides数组(slides对象)
mySwiper.appendSlide(innerHTMl,slideClassList,element)-创建新滑块并插入到slider最后面。返回slide实例:其中:
html(string[字符型],required[必需的])-生成的滑块的HTML元素的内容
slideClassList(stirng[字符型],optional[可选的])- 创建类”class“属性。缺省值为"swiper-slide "
element(string[字符型],optional[可选的])-创建滑块的HTML标签,缺省值为"div"
mySwiper.appendSlide(slideInstance)[slideInstance-HTMLElement]-插入到slider末尾。返回slide实例
mySwiper.prependSlide(innerHTMl,slideClassList,element)-新创建slide并插入到slider首位置。返回slide实例
mySwiper.prependSlide(slideInstance)[slideInstance-HTMLElement]-将slideInstance插入到slider首位置。返回slide实例。
mySwiper.insertSlideAfter(index,innerHTML,slideClassList,element)-新创建slide并插入到slider指定的索引位置index。返回slide实例。
mySwiper.insertSlideAfter(index,slideInstance)-将slideInstance插入到slider指定的索引位置index。返回slide实例。
mySwiper.removeSlide(index)[index-numer]-移除索引为index的slide
mySwiper.removeLastSlide()-移除最后一个slide
mySwiper.removeAllSlides()-移除所有slides
mySwiper.getSlide(index)[index-number]-返回index索引的slide
mySwiper.getLastSlide()-返回最后一个slide
mySwiper.getFirstSlide()-返回第一个slide
//例子: //创建slide并插入 mySwiper.appendSlide('Hello World') //或者: var newSlide = mySwiper.createSlide('Hello World') mySwiper.appendSlide(newSlide) //或者: mySwiper.appendSlide( mySwiper.createSlide('Hello World') ) //复制第一个slide并插入到最后 mySwiper.getFirstSlide().clone().append(); //或者: mySwiper.appendSlide( mySwiper.getSlide(0).clone() ) //复制第二个slide修改内容并插入到最后 mySwiper.getSlide(1).clone().html('Hello New World!').append(); //移除最后一个slide mySwiper.removeLastSlide() //移除第二个slide mySwiper.removeSlide(1) //Trick: 更换第一与第二个slide位置 mySwiper.getSlide(0).insertAfter(1) //Trick: 移动第一个slide到最后一个位置 mySwiper.getFirstSlide().append() //slide数量 alert(mySwiper.slides.length) //改变每个slide的html for (var i = 0; i < mySwiper.slides.length; i++) { var slide = mySwiper.slides[i] slide.html('<p> My index number is '+i+' </p>') }
Important Notes(重要备注)
当使用改变slides数量的方法时(例如append,prepend,remove等等),reInit()方法会被调用然后slides数量会自动重新计算。所以非常不推荐动态添加/删除slides时在"for"循环中使用"slides.length",因为这样做可能产生死循环。
- Swiper使用说明
- swiper
- swiper
- swiper
- swiper
- Swiper
- swiper
- Swiper
- Swiper
- Swiper
- swiper.js
- swiper ontouch
- Swiper使用
- swiper插件
- Swiper使用方法
- swiper.js
- swiper.js1
- swiper.js2
- 搭建嵌入式开发环境总结
- 大数据引发的联想--人工智能
- 微软100题(58)倒叙输出链表
- 8.18在类模板外定义成员函数,实现3个数求和
- Linux内核编程接口函数
- Swiper使用说明
- opencv源码研究: icvGetHaarTrainingDataFromBG和icvGetHaarTrainingDataFromVec的区别
- 网络编程
- 在VirtualBox上安装OS X 10.10
- cocos2d-x 3.0 触摸机制的使用
- 移动互联网第一步
- java 的builder模式——设计思想
- Linux0.11内核--内核空间、用户空间之间的数据传输
- MVC北京络捷斯特第三方物流系统技术解析(九)到货通知