Swiper使用说明

最新推荐文章于 2024-04-09 11:49:23 发布
最新推荐文章于 2024-04-09 11:49:23 发布
阅读量1w 收藏 3
点赞数 2
分类专栏： javascript 文章标签： Swiper
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012217533/article/details/46335075
版权
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左右。
以上，就是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&nbsp;Swiper（container,options）

    container:&nbsp;字符串要求，Swiper's容器的css选择器。在上面的HTML代码中就必须等于“.swiper-container”;

    options:-对象，可选择的。Swiper参数，详情见下：

用法： 

var mySwiper = new Swiper(".swiper-container",{
      speed:750,
      mode:"vertical"
 })

    返回拥有众多有用函数（functions）以及方法(methods)的对象:

    mySwiper.disableMousewheelControl()-滑动中禁掉鼠标滑轮（mousewheel&nbsp;control）控制

    mySwiper.enableMousewheelControl()-能够使用禁掉了的鼠标滑轮

    mySwiper.enableKeyboardControl()-滑动中键盘控制可用

    mySwiper.disableKeyboardControl()-禁用滑动中键盘控制

    mySwiper.swipeNext()-执行过渡动画到下一滑块（slide）(简单来说就是滑动到下一个页面)

    mySwiper.swipePrev()-执行过渡动画到上一滑块

    mySwiper.swipeTo(index,speed,runCallbacks)&nbsp;-&nbsp;执行过渡到索引下标数字等于传入参数“index”的页面（slide）处，速度为传入的参数“speed”。同时可将“runCallbacks”设置为false（默认为“true”），那么transition（过渡）不会产生onSlideChange回调函数。

    mySwiper.browser.ie10&nbsp;-&nbsp;返回&nbsp;“true”如果浏览器为IE10

    mySwiper.browser.is8&nbsp;-返回&nbsp;“true”如果浏览器为IE8

    mySwiper.support.touch&nbsp;-返回&nbsp;“true”如果浏览器支持触屏

    mySwiper.support.transforms&nbsp;-返回&nbsp;“true”如果浏览器支持css3&nbsp;transforms(变形)

    mySwiper.support.transforms3d&nbsp;-返回&nbsp;“true”如果浏览器支持css3&nbsp;3D&nbsp;transforms(变形)

    mySwiper.support.transitions&nbsp;-返回&nbsp;“true”如果浏览器支持css3&nbsp;transitions(过渡)

    mySwiper.activeSlide()&nbsp;-&nbsp;返回当前活动块（slide）（slide&nbsp;实例，HTML元素）

    mySwiper.clickedSlideIndex&nbsp;-&nbsp;返回触控/点击块（slide）的索引（数字）。只适用于“onSlideTouch”和“onSlideClick”

    回调函数中。

    mySwiper.clickedSlide&nbsp;-&nbsp;返回触控/点击块（slide）（slide实例，HTML元素）。只适于“onSlideTouch”和“onSlideClick”

    回调函数中。

    mySwiper.activeIndex-&nbsp;返回当前活动块的索引（number）

    mySwiper.activeLoopIndex-&nbsp;返回当前活动块在loop&nbsp;模式下的索引（number）

    mySwiper.activeLoaderIndex-&nbsp;返回当前活动块在loader模式下的索引（number）

    mySwiper.previousIndex-&nbsp;返回上一个活动块的索引（number）

    mySwiper.startAutoplay()-开始自动播放。应用于自定义“Play”和“Pause”按钮

    mySwiper.stopAutoplay()-停止自动播放。应用于自定义“Play”和“Pause”按钮

    mySwiper.destroy(removeResizeEvent)&nbsp;-移除所有绑定的事件监听（窗口的尺寸改变事件【如果removeResizeEvent的值不等于“false”】，容器（wrapper）的触控事件，以及文档的鼠标事件），对于添加/移除滑块，页面到文档时非常有用，能够释放浏览器内存。

    mySwiper.resizeFix()-调用这个方法当你改变swiper's&nbsp;的尺寸而没有改变窗口大小时。

    mySwiper.reInit()-&nbsp;重新初始化Swiper。对于动态添加/移除滑块非常有用。

    mySwiper.width&nbsp;返回Swiper容器的宽度

    mySwiper.height返回Swiper容器的高度

    mySwiper.isTouched&nbsp;返回布尔值，当触控该slide时返回“true”

    mySwiper.positions&nbsp;-&nbsp;返回包含x,y坐标的wrapper对象

    mySwiper.touches&nbsp;-&nbsp;返回包含触控信息的对象数组

    mySwiper.params&nbsp;-&nbsp;获取对象初始化参数，能够在初始化之后改变/重写该参数，如：

    mySwiper.params.speed&nbsp;=&nbsp;500;

    mySwiper.getWrapperTranslate(axis)-返回当前容器“位移（translate）"【css3&nbsp;transform&nbsp;-&gt;translate】,即x,或y轴的偏移量。”axis“-参数为字符串”x“或”y“,对应于水平模式及垂直模式。

    mySwiper.setWrapperTranslate(x,y,z)&nbsp;-&nbsp;手工设置css3&nbsp;transform's&nbsp;translate&nbsp;的值。x,y&nbsp;and&nbsp;z&nbsp;-为数字

    mySwiper.wrapperTransitionEnd(callback,permanent)&nbsp;-&nbsp;使用该方法当Swiper&nbsp;”transitionEnd“事件触发后能够自定义回调函数（在swipeNext,swipePrev,swipeTo&nbsp;以及swipeReset&nbsp;函数之后）:

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;callback-函数（function）。默认状态下（如果permanent&nbsp;值为false）transitions只执行一次

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;permanent&nbsp;-&nbsp;boolean&nbsp;.&nbsp;默认状态下为false，当设置为真时该回调函数callback会执行多次。

    &nbsp;

    选项（options）

    Swiper&nbsp;初始化&nbsp;支持下列中的参数

   

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不会被禁掉，用户操作之后每次都会重新启动autoplay
autoplayStopOnLastbooleanfalsetrue设置为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大的多个slides
slidesPerGroupnumber12定义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，设置值为true
initialSlidenumber20初始块（页面）的索引
useCSS3Transformsbooleantruefalse值为false时禁用css3 transforms（减少内存，提高性能，同时也降低了美观）,同时使用wrapper的left/top属性代替。


自由模式与滑块容器（Free Mode and Scroll Container)


Parameter（参数）Type（类型）Default Value（默认值）Example（例子）Description（说明）
freeModebooleanfalsetrue若为真slide坐标不固定
freeModeFluidbooleanfalsetrue若为真，释放滑块之后仍会滑动一小会
scrollContainerbooleanfalsetrue设置为真时，让Swiper看上去像滑动区（scrollable area）
momentumRationumber12设置的值越大，当释放滑块时的动量距离越大
momentumBouncebooleantruefalsefalse时禁用自由模式下的（free mode）动量弹性
momentumBounceRationumber12值越大产生的动量弹性（momentum bounce）效果越明显


块（slides）偏移


Parameter(参数)Type(类型)Default Value(默认值)Example(例子)Description(说明)
centeredSlidesbooleanfalsetrue若为真，那么活动块会居中，而非默认状态下的居左
offsetPxBeforenumber0100指定slides与wrapper左边框的偏移量
offsetPxAfternumber0100指定slides与wrapper右边框的偏移量
offsetSlidesBeforenumber02滑块slides与wrapper左边框的偏移量等于等于指定滑块slides个数的宽度。这在响应式布局中而你又不知道slides宽度时，将十分有用。
offsetSlidesAfternumber02滑块slides与wrapper右边框的偏移量等于等于指定滑块slides个数的宽度。这在响应式布局中而你又不知道slides宽度时，将十分有用。


触屏/鼠标事件效应（Touch/mouse interactions ）


Parameter（参数）Type(类型)Default Value（默认值)Example（例子）Description（说明)
touchRationumber10.8触屏比率
simulateTouchbooleantruefalsetrue,Swiper接受鼠标事件时与触屏事件相似。（单击以及拖曳滑块）
onlyExternalbooleanfalsetrue值为true时，只能使用扩展API函数内的swipeRight 或swiperLeft改变slides滑动，其他失效。正如例子里的tabs切换十分有用
followFingerbooleantruefalse值为false时，仅当你释放slide时才会滑动，当你用手指按住滑块它不会动。
grabCursorbooleanfalsetrue该选项给Swiper用户提供小小的贴心应用，值为true时，光标在Swiper上时成手掌状。
shortSwipesbooleantruefalse值为false时，禁用short swipes
longSwipesRatidnumber0.50.3Swiper 中到上/下滑块的触发率
moveStartThresholdnumberfalse100滑动的临界值，临界值单位为px，如果触屏距离小于该值滑块不会运动。


Navigation


Parameter（参数）Type(类型)Default Value（默认值)Example（例子）Description（说明)
keyboardControlbooleanfalsetrue值为true时，水平模式下，能使用键盘左右方向键滑动，垂直模式下能使用上下方向键滑动
mousewheelControlbooleanfalsetrue值为true时，能够使用鼠标滑轮滑动swiper
mousewheelControlForceToAxisbooleanfalsetrue值为真时，鼠标轮滑会改变轴向，所以水平模式下的鼠标滑轮只作用于水平鼠标滑块，垂直的作用于垂直模式。

Pagination（分页器）(指示器)


Parameter（参数）Type(类型)Default Value（默认值)Example（例子）Description（说明)
paginationstring or HTML Element-'.my-pagination'css选择器中的分页。或者HTML元素内的分页元素
paginaClickablebooleanfalsetrue值为真时，当单击指示器时会执行过渡动画到目标slide
paginationAsRangebooleantruefalse为真时，跟可见块相关的指示器按钮会新增css类。当使用slidesPerview超过1时会十分有用。
createPaginationbooleantruefalse值为真时，Swiper会在slider内生成与slides数量相同的SPAN标签。所有这些生成的span标签都在pagination容器内。每一个span标签都有一个”swiper-pagination-switch“类名，活动的span（及当前slide下的）有一个为”swiper-active-switch’的类名，对于这些使用样式十分有用。


命名空间namespace


Parameter（参数）Type(类型)Default Value（默认值)Example（例子）Description（说明)
wrapperClassstring'swiper-wrapper''my-wrapper'Swiper内wrapper的css类。具体查看上面的例子
slideClassstring'swiper-slide''my-slide'Swiper内slide的css类名。具体查看上面的例子
slideActiveClassstring'swiper-slide-active''my-active-slide'Swiper内活动块的css类名。。。
slideElementstring'div''li'使用单一滑块的标签
noSwipingClassstring'swiper-no-swiping''stop-swiping'html元素使用的类名，当noSwiping参数设置为true时，用于禁止滑动
paginationElementstring'span''div'使用唯一指示按钮的标签
paginatinElementClassstring'swiper-pagination-switch''my-switch'使用多个指示按钮的类名
paginationActiveClassstring'swiper-active-switch''my-active-switch'当前活动指示按钮的类名
paginationVisibleClassstring'swiper-visible-switch''my-visible-switch'可见指示按钮的类名


回调函数（Callbacks）


Parameter（参数）Type(类型)Default Value（默认值)Example（例子）Description（说明)
queueStatCallbacksbooleanfalsetrue设置为true时，‘slideChangeStart’回调函数入队，所以在快速滑动过程中回调函数只被调用一次。
queueEndCallbacksbooleanfalsetrue设置为true时，‘slideChangeEnd’回调函数入队，所以在快速滑动结束后回调函数只被调用一次。
onFirstInitfunciton-function(swiper){//执行代码}回调函数，首次初始化后马上执行
onInitfunciton-function(swiper){//执行代码}回调函数，在其他所有的初始化/再初始化后马上执行
onSwiperCreatedfunciton-function(swiper){//执行代码}回调函数，当Swiper初始化完成，loop，pagination，等其他参数或方法生成之后执行
onTouchStartfunciton-function(swiper){//执行代码}回调函数，当碰触到slider时马上执行
onTouchMovefunciton-function(swiper){//执行代码}回调函数，当碰触slider到释放期间执行。
onTouchEndfunciton-function(swiper){//执行代码}回调函数，当释放slider时执行
onSlideResetfunciton-function(swiper){//执行代码}回调函数，释放滑块之后，滑块将要滑到当前活动的slide时执行。freeMode模式下不生效。
onSlideChangeStartfunciton-function(swiper){//执行代码}回调函数，当动画开始过渡到另一slide时执行，即动画开始时执行。freeMode模式下不生效。
onSlideChangeEndfunciton-function(swiper){//执行代码}回调函数，过渡动画结束后执行，即滑块活动停止后执行。freeMode模式下不生效。
onSlideNextfunciton-function(swiper){//执行代码}回调函数，与onSlideChangeStart相似，但该函数只能在滑向下一slide开始时生效
onSlidePrevfunciton-function(swiper){//执行代码}回调函数，与onSlideChangeStart相似，但该函数只能在滑向上一slide开始时生效
onSlideTouchfunciton-function(swiper){//执行代码}回调函数，当触碰事件发生后生效。与onToucStart相似，不过该函数会返回.clickedSlide和.clickedSlideIndex的值
onImageReadyfunciton-function(swiper){//执行代码}回调函数，所有内置图像加载完成后执行，同时“updateOmImagesReady”需设置为“true’
onMomentumBouncefunciton-function(swiper){//执行代码}回调函数，执行于动量反弹（momentum bounce）过程中
onResistanceBeforefunciton-function(swiper,p){//执行代码}回调函数，执行于negative resistance过程中。p-返回抵抗距离。
onResistanceAfterfunciton-function(swiper,p){//执行代码}回调函数，执行于positive resistance过程中。p-返回抵抗距离。
onSetWrapperTransitionfunciton-function(swiper,duration){//执行代码}回调函数，每次当Swiper开始动画时执行
onSetWrapperTransformfunciton-function(swiper,transform){//执行代码}回调函数，swiper的容器wrapper改变其坐标时执行。返回带当前transform 的偏移量的对象。


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&nbsp;1”&nbsp;以及“Hello&nbsp;2“，该种方式下addCallback方法需要注意该回调函数名不包含”on“。


解除（fire）callback&nbsp;函数语句：

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"，因为这样做可能产生死循环。

键盘突突突
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端笔记——Swiper（持续更新中）~
Mike白的博客
06-30 2597
Swiper 是一个流行的、免费的、开源的JavaScript库，用于创建移动设备和桌面端的滑块轮播图、触摸滑动页面、图片和内容的滑动和切换效果。Swiper 可以实现多种滑动效果，如淡入淡出、平移、3D 立体翻转等，同时也支持响应式设计和自动播放等功能。Swiper 具有良好的可定制性和易用性，支持多种平台和浏览器，还提供了丰富的 API 和事件，可以轻松地实现各种复杂的滑动效果和交互动画。
图片轮播——Swiper实例
默存
12-21 1556
一、Swiper简介 Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择...
Flutter笔记（12）flutter中swiper实现轮播图，2024年最新androidhidl视频教程
最新发布
2401_84006805的博客
04-09 695
只要是程序员，不管是Java还是Android，如果不去阅读源码，只看API文档，那就只是停留于皮毛，这对我们知识体系的建立和完备以及实战技术的提升都是不利的。真正最能锻炼能力的便是直接去阅读源码，不仅限于阅读各大系统源码，还包括各种优秀的开源库。腾讯、字节跳动、阿里、百度等BAT大厂 2019-2021面试真题解析资料太多，全部展示会影响篇幅，暂时就先列举这些部分截图一个人可以走的很快，但一群人才能走的更远。
swiper的基础使用（五）
never__ends的博客
06-20 871
本节讲解如何让swiper页面分组显示。 有时候一个屏幕当中只显示一个页面并不能满足我们的开发需求，在swiper当中就包装了一个屏幕显示一组页面的方法，只需要在swiper页面的初始化当中添加一条属性即可。   第一步我们依然是编写一个基础的swiper页面。 第一页 第二页
Swiper学习之三---swiper的配置选项 ②：Free模式和Effects切换效果
等，你的到来。
01-05 6895
大家好，好长时间没继续更新Swiper的博文了，小伙伴的swiper学习怎么样了呢，萍子要继续学习swiper的有关知识了，哈哈哈，要不要一起啊。 之前已经更过两篇关于Swiper的博文了，关于Swiper我在主页设置了一个专栏，需要的小伙伴们，可以去看看啊。Swiper专栏 好了，我们今天学习的内容一共有两部分，很简单的内容，一起开始吧。一、Free模式/抵抗模式浅显理解根据字面意思就是说，在
使用 Swiper4.5.3、Swiper11 的示例
Lyrelion的博客
07-23 4551
使用 Swiper4.5.3、Swiper11 的示例
Swiper中文说明文档
08-21
Swiper中文说明文档 Swiper 是一款免费、轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。...
swiper中文说明.doc
09-05
14. **滑动容器**：允许在无slides的区域中使用Swiper。 15. **嵌套Swipers**：在一个Swiper的slide中嵌套其他Swiper实例，支持垂直或水平方向。 16. **任意HTML内容**：slide中可以包含任何HTML元素，不限于图像。 ...
swiper.zip
07-02
总的来说，"swiper.zip"提供了一个实用的Swiper4示例，对于那些想学习或使用Swiper4构建图片切换效果的开发者来说，这是一个很好的资源。通过解压并研究其中的代码，我们可以深入理解Swiper的工作原理，以及如何将其...
swiperdemo.zip
04-14
7. **LICENSE**：项目许可文件，说明了可以如何使用和分发这些代码。 8. **测试文件**：可能包含单元测试或集成测试，确保组件的正确运行。 通过解压和研究这个“swiperdemo”项目，开发者可以学习到如何在Vue项目...
swiper示例，横向布局，垂直布局，配色参数，Grid，Menu
01-29
这个文件通常包含项目的介绍、安装指南、使用方法以及示例代码的详细说明。对于初学者来说，这是一个非常有价值的资源，帮助他们快速理解和应用Swiper。 8. **images**： `images`目录可能包含用于示例的图片资源...
前端开发技术难点汇总（六）
qw2319205chu的博客
09-18 1563
swiper 频繁切换页面 轮播失效或者滑动异常解决 mySwiper.destroy(false); 离开页面注销swiper h5点击背景ios会闪一下 CSS -webkit-tap-highlight-color: transparent; 正则判断空格，多次换行 文本框是不是为空 replace(/\s+|[\r\n]/g, “”); h5 input 调起相机和相机 操作完拿不到图片 调用前将input value值清空，否则@change有时接受不到值 无障碍识别 将img,div等内容识别.
swiper 偏移问题
gao1017的博客
03-03 1673
swiper根据内容变动，自动初始化插件的添加observer：true var mySwiper = new Swiper（‘.swiper- container’，｛ loop：true， observer：true，//修改swiper自己或子元素时自动初始化swiper observerParents：true//修改swiper的父元素时，自动初始化swiper｝） ...
swper_Swiper 中文API手册（share）
weixin_39595085的博客
12-19 464
Usage:1、下载swiper最新版本https://github.com/nolimits4web/Swiper2、在HTMLHead中添加Swiper'sCSSandJS:1 2 ....3 4 5 ....6 其中引用的文件名以下载的为准。3、使用下面的HTML布局1 2 3 4 5 6 7 8...
04-swiper概述
前端萌新
08-21 676
swiper概述
微信小程序最基本的组件swiper的使用
qq_44170622的博客
06-19 1905
学习微信小程序开发，最基本的便是轮播图的使用，当然微信官方给了最基本的组件的使用，swipe的使用，在我使用的时候，我发现也有很多的小坑，不过程序开发就是在Bug中不断成长 swiper插件的使用 swiper插件也就是轮播图，只不过我们在自己开发HTML的时候，我们一边下载别人的封装好的插件，不过在微信小程序后，我们官方文档给了一些配置，这使得我们通过配置某些参数，我们能够达到某些复杂插件的作用。 首先我们写入最基本的结构 <view > <swiper class="swiper"
使用swiper插件无限滚动时，点击事件不生效
魅影前行的博客
03-23 852
使用loop: true;时，swiper在页面dom生成过程中，对轮播的box进行了一次复制，这个复制过程无法对box的事件进行复制，
swiper使用记录js水平轮播
weixin_45599105的博客
10-20 1071
Swiper使用记录js水平轮播
微信小程序swiper，修改滑动动画时长和点击进去默认显示的页面
qq_43628847的博客
10-18 2290
点击不同的图片，进入swiper页面，显示到对应的item上 我使用了current属性 第一个页面向第二个页面传递，对应的id <image class="cxyr-icon {{big_icon == 1?'big':''}}" data-id="1" src="{{chen_icon}}" bindtap="toDetail"></image> toDetail: function (e) { var id = e.currentTarget.dataset.id;
vue-awesome-swiper配置说明
10-17
好的，关于vue-awesome-swiper的配置说明，我可以简单介绍一下。 首先，你需要安装vue-awesome-swiper插件，可以使用npm或yarn进行安装。安装完成后，在你的Vue组件中引入Swiper组件即可开始使用。 在使用Swiper组件时，你需要在data中定义一个swiperOptions对象，用于配置Swiper的参数。其中包括： 1. direction：滑动方向，默认为horizontal（水平方向），可选值为vertical（垂直方向）。 2. loop：是否循环滑动，默认为false。 3. autoplay：是否自动播放，默认为false。 4. pagination：是否显示分页器，默认为false。 5. navigation：是否显示前进后退按钮，默认为false。 6. slidesPerView：每页显示的滑块数量，默认为1。 7. spaceBetween：滑块之间的距离，默认为0。 除了以上参数外，还有很多其他的参数可以配置，具体可以参考官方文档。 在Swiper组件中，你需要使用v-for指令来循环渲染每个滑块。同时，你也可以在每个滑块中添加自己的内容，例如图片、文字等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值