swiper中文说明最近使用Swipe.js发现的很少试着翻译了一下能力有限

swiper概最近使用Swipe.js，发现中文的资料很少，试着翻译了一下。能力有限，翻译难免错漏，请，多谢！如果想获得国外较多而全的文档，还是用一了解Swiper是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加（webapps），以及原生的应用程序（nativeapps）。主要是为IOS而设计的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的用户体特征1、1：1Swiper1:12 3、水平/Swiper运动主要有两种模式，horizontal(水平滑动)以及vertical（垂直4、自由模式（这种模式下能够让slides无需定位，就像通常的滑动条。（看下面的例5、旋转调整Swiper6能使用百分比的宽高定义slides,为移动端提供不同的解决方案。8、抵抗反弹（resistantSwiper能够提供一种机制，就是当滑动滑块超过最左以及最右（最上或最9、原生要素（nativemomentum）有不少的原生东西提供给Swiper。10Swiper能够快速生成内建的分页控制（pagination）,指定html某一标签为pagination，Swiper就能做很多东西了。11只用设置延迟时间，Swiper就会自动地轮播slides（touch）12、循环模式（Loop13、旋转模式（CarouselSwiper能够让你在slides父容器下设置你所需要展示的slides14在该特征下能够使用Swiperslides。在Apps15、嵌套能够将Swipers嵌套入各种不同的Swiper的slide里，例如垂直的或水16、任意的HTML可以将任一的HTML内容放到slide17swiper使用硬件加速技术（如果该移动设备支持的话）能够得到良好流畅的动画效果以及优美的外观，尤其是在IOS设备里。18、丰富的Swiper拥有丰富的API接口。（以及4个回调函数：19Swiper在初始化的时候能够接受多个参数以便让其尽可能的灵活。能够配置动画的速度（speed），模式（mode水平抑或垂直的），以及自由模式（mode）...以及其他..20、插件API（PluginsAPI）Swiper从1.7版本开始就变得强大起来了，因为 而简单的插件允许开发者创造属于自己的Swiper插件或通过Swiper的 hooks(挂钩)（该官网处提供了几款优秀的插件Swipersmoothprogress,Swiperhashnavigation,swiperscrollbar）21Swiper通用性的测试环境：移动端的Safari（iOS5下），Android2.1+，windowsPhone8,以及版本的谷歌浏览器（Chrome），Safari，Firefox，IE10以及欧朋浏览器（Opera）22IESwiper2.x开始，通过DOM动画，而非csstransitions兼容IE7以上（需要包含jQuery），因为IE7不支持css3 简单来说，持IE723Swiper不依赖像jQuery那样的js类库，因此能够让Swiper更加的小型以及快速。所以Swiper能够很安全地应用诸如jQuery、jQuery，jQTouch等等其他的js类库。2410KB以上，就是Swiper能够做的，应用以上特征就使用原生属性方法能够快速生成令人惊叹的触控接口以及apps。一、swiper1、swiper版本 2、在HTMLHead中添加Swiper'sCSSandJS:其中的文件名以的为准3、使用下面的HTML4、打开的文件中的idangerous.swiper.css，设置Swiper's的宽度以.swiper-container,.swiper-slide{width:500px;height:}5、初始化Swiper在文档开始处，（或在窗口加载时window.onload=function()varmySwiper=newSwiper('.swiper-loop:true//等等}二、newcontainer字符串要求，Swiper's容器的css选择器。在上面的HTML代码options:-对象，可选择的。SwipervarmySwiper=newSwiper(".swiper-container",{（mousewheelcontrol）·mySwiper.swipeTo(index,speed,runCallbacks)执行过渡到索引下标同时可将“runCallbacks”false（默认为“true”），那么transition（过渡）不会产生onSlideChange·mySwiper.browser.ie10“true”如果浏览器为·mySwiper.browser.is8“true”如果浏览器为·mySwiper.support.touch“true”·mySwiper.support.transforms“true”css3transforms(变形·mySwiper.support.transforms3d“true”css33Dtransforms(变形·mySwiper.support.transitions“true”css3transitions(过渡·mySwiper.activeSlide返回当前活动块（slide）（slide实例，HTML·mySwiper.clickedSlideIndex返回触控/点击块（slide）的索引（数·mySwiper.clickedSlide返回触控/点击块（slide）（slide实例，HTML·mySwiper.activeIndex返回当前活动块的索引·mySwiper.activeLoopIndex返回当前活动块在loop·mySwiper.activeLoaderIndex返回当前活动块在loader·mySwiper.previousIndex返回上一个活动块的索引·mySwiper.startAutoy()-开始自动。应用于自定义“ ·mySwiper.stopAutoy()-停止自动。应用于自定义 y”和·mySwiper.destroy(removeResizeEvent)-移除所有绑定的（窗口的尺寸改变【如果removeResizeEvent的值不等于“false”】，容器（wrapper）的触控，以及文档的鼠标），对于添加/移除滑块，页面·mySwiper.resizeFix()-调用这个方法当你改变swiper's的尺寸而没有改变·mySwiper.reInit重新初始化Swiper。对于动态添加/移除滑块非常有·mySwiper.width返回Swiper·mySwiper.height返回Swiper·mySwiper.isTouched返回布尔值，当触控该slide时返回·mySwiper.positions返回包含x,ywrapper·mySwiper.touches·mySwiper.params获取对象初始化参数，能够在初始化之后改变/重写该mySwiper.params.speed="【css3transform->translate】,x,或y轴的偏移量。”axis“-参数为字·mySwiper.setWrapperTranslate(x,y,zcss3transform'stranslate的值。x,yandz·mySwiper.wrapperTransitionEnd(callback,permanent使用该方法当Swiper”transitionEnd“触发后能够自定义回调函数（在swipeNext,swipePrev,swipeTo以及swipeReset函数之后）:callback-函数（function）。默认状态下（如果permanentpermanentboolean默认状态下为false，当设置为真时该回调函数callback会执行多次。swiper选选项SwiperParameter（参数Description（说明slides（swipers对象，默认状态下所有的触控只能用于wrapper。如若需要其他元素包含在containerswipers,那么可以使用'container'.2.4.2y-过渡延迟时间（ms），参数没有指定的情况下，不生效，（补充：当用户操作后autoy失false（swipes,arrow以及pagination点击）autoy不会被禁掉，用户操作之后每次都会重新启动autoy。设置为false后autoy在最后一个块下失效（在loop）slidesloop02loopslides12loop14slider'sslides'auto'值，会根据容器loop仅当已设置了slidesPerView:'auto'，以及当然后宽度大的slide 分。为false时，slidetransition会划分为比容器container大的多个slides12效。（carouselmode）当值为true时，Swiper根据slides内容计算容器高度。响应式布局中或不知道slides高度时十分有trueSwipercontainer，wrapperslides当所有的内嵌图像（img）加载完成后csstransitions(IE7-9)的浏览器上是否DOMfalseresistantbounds（弹）,设置为‘100%'resistant（抵抗）trueswiper启用时当碰触滑块（slides）preventLinksstopPropagation，20初始块（页面）falsecss3transforms（减少内存，提高性能，同时也降低了美观）left/top自由模式与滑块容自由模式与滑块容器（ModeandScrollParameter（参数Default（子Description（slideSwiper（scrollable12false时禁用自由模式下的（mode）动量12值越大产生的动量弹性（momentumbounce）效块（slides）偏Parameter（参数 （子Description（0slideswrapper0slideswrapper02滑块slideswrapper左边框的偏移量等于等于指定滑块slides个数的宽度。这在响应式布局中slides02滑块slideswrapper右边框的偏移量等于等于指定滑块slides个数的宽度。这在响应式布局中slides触屏/鼠标效（Touch/mouseinctionsParameter（参数 （子Description（1true,Swiper接受鼠标时与触屏相似（单击以及拖曳滑块trueAPIswipeRight或swiperLeftslidestabsfalseslideSwipertrueSwiperfalseshort 导航Parameter（参数Default（子Description（swipermousewheelControlPagination（分页器）(指示器Parameter（参数Default（Description（-slidecssslidesPerview1值为真时，Swiper会在slider内生成与slides数量相同的SPAN。所有这些生成的span 都在pagination容器内。每一个span pagination-switch“类名，活动的span（slide）命名空间Parameter（参数DefaultValue（Example（例子Description（'swiper-'my-Swiperwrappercss类。具体查'swiper-'my-css'swiper-slide-'my-active-Swipercss'swiper-slide-SwipercssnoSwi'swiper-no-swi'stop-swinoSwi时，用于滑'my-'swiper-active-'swiper-visible-Callbacks回调函数Parameter（参数Default（Example（例子Description（truetrue-{}-}-}回调函数，当Swiper-}slideronTou-}-}slider-}执行。Mode模式-}始过渡到另一slide时执行。Mode模-}Mode模式下不生-}-}-}onToucStart回x-}-}（momentum）on-}negativeresistancep-返回抵on-}positiveresistancep-返回抵-}-}wrappertransform的举例以下需要jQuery文$(varmySwiper$('.swiper-container').swiper({mode:'vertical',//选择垂直模式，speed:500,//500msMode:true,//开启自由模式ModeFluidtrue,开启'fluid'自由模式onTouchStart:function()//alert('OMGyoutouchthe}}三、Callbacks从Swiper2.4版本开始增加了一些回调函数，现在添加一些函数到上面。当初始化Swiper时，旧版本指定回调函数的方式：$(varmySwiper=newSwiper('.swiper-container',{speed:onSlideChangeStart:function(swiper){alert('o1');}新版本中能够实现无需完全重写onSlideChangeStart参数，可以添加新函数mySwiper.addCallback('SlideChangeStart',function(swiper){alert('o2');你会发觉在过渡动画开始时弹出“o1”以及“o2“，该种方式addCallback方法需要注意该回调函数名不包含”on“。解除（fire）callback函数语句：四、SlidesSwipercomeswithpowerfulSlidesAPIthatisintendedfordynamicslidesSlideSwiper'sSlideinstanceisthesimpleHTMLElementbutextendedwithusefullAccordingtothefollowingexamplemySwipervariablecontainsSwiper'sobjectwithoptionsandmethods<script<script varmySwiper=$('.swiper-container').swiper({mode:'vertical',//Switchtoverticalmodespeed:500,//Setanimationdurationto500msMode:true,ModeFluid:true,//EnableonTouchStart:function()//Dosomethingwhenyoutouchthealert('OMGyoutouchthe}}Youcancreateswiper'sslideinstancebyhtml(string,required)-innerHTMLofcreatedslideClassList(string,optional)-"class"attributeofcreatedslide.Bydefaultequalto"slideClass"optionwhichbydefaultequalto"swiper-slide"element(string,optional)-htmltagofcreatedslide,bydefaultequaltovarvarmySwiper=$('.swiper-container').swiper({...some//CreatenewinstanceofvarnewSlide=mySwiper.createSlide('<p>Hereismynew//ThiswillgeneratethefollowingHTMLslide:'<divclass="swiper-<p>Hereismynewslide</p>varnewSlide=slide',o</p>','swiper-slide//ThiswillgeneratethefollowingHTMLslide:'<spanclass="swiper-red-slide"> o</p>Afterthat"newSlide"variablecontainsjustcreatednewinstanceofSlide,butatthemomentitstillinthememory,notinsideofslider.Toaddittosliderwecanusesomeofthefollowingchainablemethodsavailableonswiper'sSlidenewSlide.append()-addnewslideasthelastslideofslider.ReturnsSlidenewSlide.prepend()-addnewslideasthefirstslideofsliderbeforeotherslides.ReturnsSlideinstancenewSlide.remove()-removenewSlide.getWidth()-returnsslide'swidthnewSlide.getHeight()-returnslide'sheightnewSlide.getOffset()-returnsobjectwithslide'sleftandtopoffsetsnewSlide.insertAfter(index)[index-number]-insertnewsliderightaftertheslidewithindexnumberequaltoindex.ReturnsSlideinstancenewSlide.clone()-cloneslidetonewslideinstancethatyoucanappend/prepend/etc.ReturnsnewclonedSlideinstancevarmySwiper=$('.swiper-container').swiper({...some//CreatenewinstanceofvarnewSlide=mySwiper.createSlide('<p>HereismynewnewSlide.append()//-newslidewillbeaddedasthelastslideofsliderafterallexistingslidesvarnewSlide=mySwiper.createSlide('<p>HereismynewnewSlide.prepend()//-newslidewillbeaddedasthefirstslideofsliderbeforeallexistingslides//CloneSlideandvarclonedSlide=newSlide.clone()//CrazyvarnewSlide=mySwiper.createSlide('<p>HereismynewnewSlide.prepend().clone().append().clone().insertAfter(2)//-newslidewillbeaddedasthefirstslideofsliderbeforeallexistingslides,thenclonedtonewslidethatwillbeaddedasthelastslideofsliderafterallexistingslides,thenclonedagaintonewslidethatwillbeaddedaftertheslidewithindexnumberequalto2Therearealsoseveralhelpersslide.html(innerHTML)[innerHTML-string]-workssimilartojQuery/Zepto.html()function.IfyouspecifyinnerHTMLthenitwillreceslide'sinnerhtmlandfunctionwillreturnslideinstance.IfinnerHTMLisnotspecifiedthenthisfunctionwillreturnslide'sinnerhtml.slide.index()-returnsindexnumberofslide.isActive()-returnstrueifslideiscurrentlyslide.setData(name,value)[name-string]-functiontostoredatainslide.Youcanstoreanytypeofvariables-arrays,objects,numbers,strings,etc.slide.getData(name)[name-string]returnsvalueofvariablestoredwithslide.data(name,value)[name-string,value-string]-savestringvaluesindata-[name]slide.data(name)[name-string]-returnsvalueofslide'sdata-[name]varmySwiper=$('.swiper-container').swiper({...some//CreatenewinstanceofvarnewSlide=mySwiper.createSlide('<p>Hereismynewslide</p>');newSlide.append().clone().html('<p>NewHTML</p>').prepend()//newslidewillbeaddedasthelastslideofsliderafterallexistingslides,thenclonedtonewslidewithotherinnerhtmlandthatwillbeaddedasafirstslidevarnewSlide=mySwiper.createSlide('<p>Hereismynewslide</p>');alert(newSlide.html())//-><p>Hereismynewslide</p>Store/GetStore/GetnewSlide.prepend().setData('apples',['iMac','MacBookPro','newSlide.getData('apples')//->['iMac','MacBookPro',',newSlide.data('apple')//-SwiperOk,let'slookonswipermethodsonhowtomanageexistingslidesoradd/removeslidesfrom"otherside":mySwiper.slides-arraywithslides(slidesmySwiper.appendSlide(innerHTML,slideClassList,element)-createnewslideandinsertitasthelastslideofslider.ReturnsSlideinstance.Where:html(string,required)-innerHTMLofcreatedslideClassList(string,optional)-"class"attributeofcreatedslide.Bydefaultequalto"slideClass"optionwhichbydefaultequalto"swiper-slide"element(string,optional)-htmltagofcreatedslide,bydefaultequaltomySwiper.appendSlide(slideInstance)[slideInstance-HTMLElement]-insertslideInstanceasthelastslideofslider.ReturnsSlideinstance.mySwiper.prependSlide(innerHTML,slideClassList,element)-createnewslideandinsertitasthefirstslideofslider.ReturnsSlideinstance.mySwiper.prependSlide(slideInstance)[slideInstance-HTMLElement]-insertslideInstanceasthefirstslideofslider.ReturnsSlideinstance.mySwiper.insertSlideAfter(index,innerHTML,slideClassList,element)-createnewslideandinsertitaftertheslidewithindexnumberequaltoindex.ReturnsSlideinstance.mySw