swiper.js

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10

主要代码 
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
 
<!-- include css -->
<link rel="stylesheet" href="assets/plugins/swiper/2.7.6/css/swiper.css">
<!-- include javascript -->
<script src="assets/js/jquery-1.11.2.min.js"></script>
<script src="assets/plugins/swiper/2.7.6/js/swiper.min.js"></script>
<!-- style -->
<style>
    .swiper-container {
            width: 100%;
            height: 300px;
        }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
    }
</style>
<!-- html -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-color:#eee">Slide 1</div>
        <div class="swiper-slide" style="background-color:#fef">Slide 2</div>
        <div class="swiper-slide" style="background-color:#ccc">Slide 3</div>
        <div class="swiper-slide" style="background-color:#ecc">Slide 4</div>
        <div class="swiper-slide" style="background-color:#cce">Slide 5</div>
        <div class="swiper-slide" style="background-color:#eff">Slide 6</div>
        <div class="swiper-slide" style="background-color:#cee">Slide 7</div>
        <div class="swiper-slide" style="background-color:#ef0">Slide 8</div>
        <div class="swiper-slide" style="background-color:#eae">Slide 9</div>
        <div class="swiper-slide" style="background-color:#ebe">Slide 10</div>
    </div>
    <!-- bottom -->
    <div class="swiper-pagination"></div>
    <!-- right and left -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>
<!-- javascript -->
<script>
    // init
    var swiper = new Swiper('.swiper-container', {
                            'autoplay': 3000,
                            'pagination': '.swiper-pagination',
                            'paginationClickable': true,
                            'spaceBetween': 30,
                            'loop': true,
                            'autoplayDisableOnInteraction': false,
                });
    // prev
    $('.swiper-button-prev').on('click', function(e){
        e.preventDefault();
        swiper.swipePrev();
    });
    // next
    $('.swiper-button-next').on('click', function(e){
        e.preventDefault();
        swiper.swipeNext();
    });
</script>
参数 类型 默认 描述
Basic（Swiper基础选项）
autoplay number 0 自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。
autoplayDisableOnInteraction boolean true 用户操作swiper之后，是否禁止autoplay。默认为true：停止。如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。操作包括触碰，拖动，点击pagination等。
autoplayStopOnLast boolean false 如果设置为true，当切换到最后一个slide时停止自动切换。（在没有设置loop的情况下）。
speed number 300 滑动速度，即slider自动滑动开始到结束的时间（单位ms）。
eventTarget string wrapper 默认状态下所有的触控事件只能用于wrapper。设定为 'container' 则其他包含在container内的元素也可触控。
mode string horizontal 滑动方向，可设置水平(horizontal)或垂直(vertical)。
loop boolean false 设置为true 则开启loop模式。loop模式：会在wrapper前后生成若干个slides让slides看起来是衔接的，用于无限循环切换。
loopAdditionalSlides number 0 loop模式下会在slides前后复制若干个slide,，前后复制的个数不会大于原总个数。默认为0，前后各复制1个。0,1,2 --> 2,0,1,2,0；例：取值为1，0,1,2 --> 1,2,0,1,2,0,1例：取值为2或以上，0,1,2 --> 0,1,2,0,1,2,0,1,2
slidesPerView number or auto 1 设置slider容器能够同时显示的slides数量(carousel模式)。另外，支持'auto'值，会根据容器container的宽度调整slides数目。'auto'不兼容loop模式，除非你设置了loopedSlides。
loopedSlides number 1 在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
slidesPerViewFit boolean true 只有当设置了slidesPerView为 'auto' 并且你有宽度大于container的slide时，该参数才有效。默认为true，slide会贴合container的边界滑动。设为false时，slide会按container的大小切开划分为多个slides。
slidesPerGroup number 1 在carousel mode下定义slides的数量多少为一组。
calculateHeight boolean false 当值为true时，Swiper根据slides内容计算容器高度。
roundLengths boolean boolean 值为true时，Swiper会四舍五入宽度和高度。
cssWidthAndHeight boolean/string false 值为true时Swiper中的container，wrapper和slides不会自动生成宽度和高度，需要你手动设定。还可以通过设定'width'或'height'来单独取消生成宽度或高度。
updateOnImagesReady boolean true 当所有的内嵌图像（img标签）加载完成后Swiper会重新初始化。
releaseFormElements boolean true 默认值为true，允许在Swiper中使用表单元素并且无法拖动这些表单元素。
watchActiveIndex boolean false 监控活动块的索引。设置为true时，拖动slide会即时更新活动块的索引值。默认值: false ，重新初始化时更新。
visibilityFullFit boolean false 如果启用，仅有“可视”的slides会最后适应容器的大小
autoResize boolean true 设置为false后，取消自适应。当窗口尺寸改变时，slide宽度不会改变。
resizeReInit boolean false 设置为true则windows改变尺寸时swiper会重新初始化。
DOMAnimation boolean true 在不支持css transitions(IE7-9)的浏览器上是否使用自定义的DOM动画。
resistance boolean or 100% true 值为false时禁用resistant bounds（抵抗反弹）,设置为‘100%'时启用resistant（抵抗）模式。
noSwiping boolean false 设为true时，可以在slide上增加类名'swiper-no-swiping'，使该slide无法滑动。该类名可通过noSwipingClass修改。
preventLinks boolean true 默认为true，当slide正在被touch时swiper阻止点击链接。
preventLinksPropagation boolean false -
initialSlide number 0 设定初始化时slide的索引。
useCSS3Transforms boolean true 如果你不想使用css3 transforms来设定slide的位移而是使用wrapper的left/top属性则可以将此参数设置为false。这会使得Swiper减少内存消耗，提高性能，但会降低美观程度。
Free Mode （free模式/抵抗反弹）
freeMode boolean false 若为true则是自由模式，不会自动贴合滑动位置。
freeModeFluid boolean false 若为true，释放滑块之后仍会滑动一点。
scrollContainer boolean false 设置为真时，把整个Swiper作为可滚动区域，在制作滚动条时使用，借助 swiper.scrollbar.css 和 swiper.scrollbar-2.1.js
momentumRatio number 1 设置的值越大，当释放slide时的滑动距离越大。
momentumBounce boolean true false时禁用free模式下的动量弹性，slide惯性滑动到边缘时，无法反弹。注意与resistance（手动抵抗）区分。
momentumBounceRatio number 1 值越大产生的边界反弹效果越明显。
Slides offset (slides位移选项)
centeredSlides boolean false 默认状态下活动块居左，设定为true时，活动块会居中。
offsetPxBefore number 0 设定slides与wrapper左边框的偏移量（单位px）。
offsetPxAfter number 0 设定slides与wrapper右边框的偏移量（单位px）。
offsetSlidesBefore number 0 设定slides与wrapper左边框的偏移个数。
offsetSlidesAfter number 0 设定slides与wrapper右边框的偏移个数。
Touch/mouse interactions (触发Swiper选项)
touchRatio number 1 触屏与slide滑动的比率。
simulateTouch boolean true 默认为true，Swiper接受鼠标点击、拖动。
onlyExternal boolean false 值为true时，只能使用扩展API函数的swipeNext() 或swipePrev()或swipeTo()改变slides滑动，其他失效，一般用于制作tab菜单。
followFinger boolean true 如设置为false，拖动slide时它不会动，当你释放时slide才会切换。
grabCursor boolean false 设置为true时，鼠标覆盖Swiper时指针会变成抓手形状。
shortSwipes boolean true 设置为false时，进行快速短距离的拖动无法触发Swiper。
longSwipesRatio number 0.5 触发swiper所需要的最小拖动距离比例。值越大触发Swiper所需距离越大。最大值0.5。
moveStartThreshold number false 拖动的临界值（单位为px），如果触摸距离小于该值滑块不会被拖动。
swipeToNext boolean true 设置为false可禁止向右或下滑动。
swipeToPrev boolean true 设为false可禁止向左或上滑动。
Navigation (鼠标、键盘控制选项)
keyboardControl boolean false 是否开启键盘控制Swiper切换。设置为true时，能使用键盘方向键控制slide滑动。
mousewheelControl boolean false 是否开启鼠标控制Swiper切换。设置为true时，能使用鼠标滑轮控制slide滑动。
mousewheelControlForceToAxis boolean false 当值为true让鼠标滑轮固定于轴向。当水平mode时的鼠标滑轮只有水平滚动才会起效，当垂直mode时的鼠标滑轮只有垂直滚动才会起效。普通家用鼠标只有垂直方向的滚动。
Pagination（分页器选项）
pagination string or HTML Element - 定义一个Swiper的分页器。默认会在这个分页器里面生成与slide对应的span标签。要求类型是css选择器或者HTML标签，如：.pagination 。
paginationClickable boolean false 值为true时，点击分页器的指示点时会发生Swiper。
paginationAsRange boolean true 默认true，会在可视的slide对应的pagination按钮上增加一个 swiper-visible-switch 类名，当你的pagination用于指示carousel模式的Swiper时很有用。默认类名可通过paginationVisibleClass修改。
createPagination boolean true 生成pagination。默认为true，Swiper会在pagination生成与slides数量相同的span元素。每一个span都有一个"swiper-pagination-switch"类名，活动的slide对应的span还有一个"swiper-active-switch"的类名，可视的slide对应的span还有一个"swiper-visible-switch"的类名。设置为false，则不生成这些span。
Namespace（命名空间）
wrapperClass string swiper-wrapper 设置wrapper的css类名。
slideClass string swiper-slide 设置slide的类名。
slideActiveClass string swiper-slide-active 设置活动块的类名。
slideVisibleClass string swiper-slide-visible 设置可视块的类名。
slideElement string div 设置slide的html标签。
noSwipingClass string swiper-no-swiping 不可拖动块的类名，当noSwiping设置为true时，并且在slide加上此类名，slide无法拖动。
paginationElement string span pagination分页器内元素的html标签。
paginationElementClass string swiper-pagination-switch pagination分页器内元素的类名。
paginationActiveClass string swiper-active-switch pagination分页器内活动(active)元素的类名。
paginationVisibleClass string swiper-visible-switch pagination分页器内与可见slide对应的按钮的类名。
Swiper 3D flow插件参数
rotate number 50 slide做3d旋转时Y轴的旋转角度。该参数为Swiper 3D flow插件参数，使用前需先加载插件。
stretch number 0 每个slide之间的拉伸值，越大slide靠得越紧。该参数为Swiper 3D flow插件参数，使用前需先加载插件。
depth number 100 slide的位置深度。值越大z轴距离越远，看起来越小。该参数为Swiper 3D flow插件参数，使用前需先加载插件。
modifier number 1 depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。该参数为Swiper 3D flow插件参数，使用前需先加载插件。
shadows boolean true 产生了3d旋转的slide是否使用阴影。该参数为Swiper 3D flow插件参数，使用前需先加载插件。
Swiper Scrollbar插件参数
container string - Scrollbar插件的滚动条容器；举例：.swiper-scrollbar。该参数为Swiper Scrollbar插件参数，使用前需先加载插件。
draggable boolean true 设定滚动条是否可拖动。默认可拖动。该参数为Swiper Scrollbar插件参数，使用前需先加载插件。
hide boolean true 滚动条是否自动隐藏。该参数为Swiper Scrollbar插件参数，使用前需先加载插件。
snapOnRelease boolean false 如果设置为true，释放拖动块时slide自动贴合，即使在free模式下。该参数为Swiper Scrollbar插件参数，使用前需先加载插件。
dragSize number - 设置拖动块的长度，单位为px(2.41版本新增)。该参数为Swiper Scrollbar插件参数，使用前需先加载插件。
onScrollbarDrag - - 回调函数，在拖动滚动条的过程中执行。该函数为Swiper Scrollbar插件函数，使用前需先加载插件。
Callbacks（回调函数）
addCallback - - 添加一个回调函数。是on系列回调函数的另一种写法。要把on去掉。
fireCallback - - 去除某个swiper的callback 函数语句。
removeCallbacks - - 批量去除回调函数。
queueStartCallbacks boolean false 设置为true时，slideChangeStart回调函数入队，所以在快速滑动过程中回调函数只被调用一次。
queueEndCallbacks boolean false 设置为true时，slideChangeEnd 回调函数入队，所以在快速滑动结束后回调函数只被调用一次。
onFirstInit - - 回调函数，首次初始化后执行。
var mySwiper = new Swiper('.swiper-container', {onFirstInit: function(swiper){}})
onInit - - 回调函数，非首次初始化后执行。
onSwiperCreated - - 回调函数，当Swiper初始化完成，loop，pagination，等其他参数或方法生成之后执行。
onTouchStart - - 当碰触到slider时执行。
onTouchMove - - 在触碰slide到释放期间执行。
onTouchEnd - - 当释放slider时执行。
onSlideReset - - 回调函数，释放滑块之后，滑块达不到swiper触发距离向后滑回时执行。free模式下不生效。
onSlideChangeStart - - 滑块释放时如果触发slider切换则执行。free模式下无效。
onSlideChangeEnd - - slider切换结束时执行。free模式下无效。
onSlideNext - - 回调函数，与onSlideChangeStart相似，但该函数只能在滑向下一slide开始时生效。
onSlidePrev - - 回调函数，与onSlideChangeStart相似，但该函数只能在滑向上一slide开始时生效。
onSlideClick - - 点击slide时执行。
onSlideTouch - - 回调函数，当触碰事件发生后生效。与onTouchStart相似，不过该函数会返回.clickedSlide和.clickedSlideIndex的值。
onImagesReady - - 回调函数，所有内置图像加载完成后执行，同时 updateOmImagesReady 需设置为 true 。
onMomentumBounce - - 在惯性滑动反弹时执行，常用于滑动刷新。
onResistanceBefore - - 抵抗反弹发生在wrapper之前时触发，就是左或上抵抗了。返回抵抗距离，常用于下拉刷新。
onResistanceAfter - - 抵抗反弹发生在wrapper之后时触发，就是右或下抵抗了。返回抵抗距离，常用于上拉刷新。
onSetWrapperTransition function - 回调函数，每次当Swiper开始动画时执行，举例： function(swiper,duration){ //执行代码 }；常用于Swiper Smooth Progress插件。
onSetWrapperTransform - - 回调函数，swiper的容器wrapper改变其坐标时执行。返回带当前transform 的偏移量的对象。
Function（Swiper函数）
disableMousewheelControl() - - 禁止鼠标滑轮控制。
enableMousewheelControl() - - 开启被disableMousewheelControl()禁止了的鼠标滑轮控制。
enableKeyboardControl() - - 开启键盘控制。
disableKeyboardControl() - - 禁止键盘控制。
swipeNext() - - 滑动到下一个滑块。
swipePrev() - - 滑动到前一个滑块。
swipeTo(index,speed,runCallbacks) - - 滑动到到指定滑块。index:必选，num，指定将要切换到的slide的索引，第一个为0；speed:可选，num(单位ms)，切换速度；runCallbacks:可选，boolean，设置为false时不会触发onSlideChange回调函数。
activeSlide() - - 获取当前的活动块。
startAutoplay() - - 开始自动切换。一般用来做 Play 按钮。
stopAutoplay() - - 停止自动切换。一般用来制作 pause 按钮。
destroy(removeResizeEvent) - - 移除所有绑定的监听事件，释放浏览器内存。
resizeFix() - - 当你改变swiper 的尺寸而没有改变窗口大小时调用这个方法。
reInit() - - 重新初始化Swiper。
getWrapperTranslate(axis) - - 返回当前wrapper位移，即x或y轴的偏移量。axis：可选值”x“或”y“，对应于水平方向或垂直方向
setWrapperTranslate(x,y,z) - - 手动设置wrapper的位移。x：水平方向，num。y：垂直方向，num。
wrapperTransitionEnd() - - 当wrapper的transition事件触发后能够自定义回调函数（在swipeNext,swipePrev,swipeTo 以及swipeReset 函数之后）。callback：必选，function。自定义的回调函数，默认状态下只执行一次。permanent ：可选boolean 。默认为false，当设置为true时自定义的回调函数会执行多次。
Method（Swiper方法）
browser.ie10 - - 如果浏览器为IE10返回true。
browser.ie8 - - 如果浏览器为IE8返回true。
support.touch - - 如果浏览器支持触屏返回 true。
support.transforms - - 如果浏览器支持css3 transforms(变形)返回 true。
support.transforms3d - - 如果浏览器支持css3 3D transforms(变形)返回 true。
support.transitions - - 如果浏览器支持css3 transitions(过渡)返回 true。
clickedSlideIndex - - 返回触控/点击块（slide）的索引（数字）。只适用于 onSlideTouch 和 onSlideClick 回调函数中。
clickedSlide - - 返回触控/点击块的slide实例(html元素)。只适于 onSlideTouch 和 onSlideClick 回调函数中。
activeIndex - - 返回当前活动块的索引。
activeLoopIndex - - 在loop模式下返回当前活动块的索引。
activeLoaderIndex - - 在loader模式下返回当前活动块的索引。
previousIndex - - 返回上一个活动块的索引。
width - - 获取swiper容器的宽度。
height - - 获取swiper容器的高度。
isTouched - - 当触控slide时返回 true。
positions - - 返回包含坐标的wrapper对象。start：滑动前的坐标。abs：触摸距离。diff：带方向的触摸距离。类似于getWrapperTranslate()
touches - - 返回包含触控信息的对象数组。
params - - 获取对象初始化参数，或者重写该参数，如： mySwiper.params.speed = 500。
增加、删除Slide
createSlide(html,slideClassList,element) - - 生成Swiper滑块。html：必选，string。生成的滑块的HTML元素的内容。slideClassList：可选，stirng。创建类”class“属性。默认为"swiper-slide "。element：可选，string。创建滑块的HTML标签，默认为"div"。
slides - - slides数组（slides对象）。
appendSlide(HTML,slideClassList,element) - - 创建新滑块并插入到slider最后面。返回slide实例。其中：html：必选，string。生成的滑块的HTML元素的内容。slideClassList：可选，string。创建类”class“属性。默认为"swiper-slide "。element：可选，string。创建滑块的HTML标签，默认为"div"。
appendSlide(slideInstance) - - 插入到slider末尾。返回slide实例。
prependSlide(HTML,slideClassList,element) - - 新创建slide并插入到slider首位置。返回slide实例。其中：html：必选，string。生成的滑块的HTML元素的内容。slideClassList：可选，string。创建类”class“属性。默认为"swiper-slide "。element：可选，string。创建滑块的HTML标签，默认为"div"。
prependSlide(slideInstance) - - 将slideInstance插入到slider首位置。返回slide实例。
insertSlideAfter(index,HTML,slideClassList,element) - - 新创建slide并插入到slider指定的索引位置index。返回slide实例。
insertSlideAfter(index,slideInstance) - - 将slideInstance插入到slider指定的索引位置index。返回slide实例。
removeSlide(index) - - 移除索引为index的slide
removeLastSlide() - - 移除最后一个slide。
removeAllSlides() - - 移除所有slides
getSlide(index) - - 返回index索引的slide
getLastSlide() - - 返回最后一个slide
getFirstSlide() - - 返回第一个slide
控制slide
append() - - 添加slide到slides的最后一个位置，返回slide实例。
prepend() - - 添加slide到slides的第一个位置，返回slide实例。
remove() - - 移除指定的slide。
getWidth() - - 获取slide宽度。
getHeight() - - 获取slide高度。
getOffset() - - 获取包含滑块left、top偏移量的对象。
insertAfter(index) - - 插入新滑块到index索引之后，返回slide实例。
clone() - - 复制slide到新slide实例，返回新复制的slide实例。
设置slide
html(innerHTML) - - 类似于jQuery的html()方法。如果指定innerHTML，那么它会替代原来slide里的内容，然后返回slide实例。 如果innerHTML没有指定，返回slide中html内容。
index() - - 返回某个slide的索引，从0开始。
isActive() - - 如果该块处于active状态返回true。
setData(name,value) - - 存储数据方法，能够存储所有类型变量-数组，对象，数字，字符等等；name : 必选，stringvalue : 必选，array, object, number等。
getData(name) - - 返回存储的变量值；name : 必选，string
data(name,value) - - 保存变量值到data属性中，存储数据方法，能够存储string类型变量。name: 必选，string；value:必选，string
data(name) - - 返回data-[name]属性值；name : 必选，string。