Swiper是一款开源、免费、强大的移动端触摸滑动插件。
http://www.swiper.com.cn/api/basic/2015/0327/263.html
一、名词解释
| 名词 | 描述 |
|---|---|
| Swiper | 整个滑动对象，有时特指滑块释放后仍然正向移动直到贴合边缘的过程(过渡) |
| container | Swiper的容器，里面包括滑动块（slides）的封套（wrapper)、分页器(pagination)、前进按钮等 |
| wrapper | 触控的对象，可触摸区域，移动的块的集合，过渡时会随slide切换产生位移 |
| slider | 切换的滑块，可以包含文字、图片、html元素或另外一个Swiper |
| pagination | 分页器，指示slide的数量和当前活动的slide |
| active slide | 活动滑块，即当前看到的(visible)slide，当可视slide不止一个时，默认最左边那个是活动滑块 |
| callback | 回调函数，在某些情况下触发 |
二、基本结构
三、初始化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="dist/css/swiper.min.css">
<!-- Demo styles -->
<style>
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 500px;
height: 300px;
margin: 20px auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!-- Swiper JS -->
<script src="dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var mySwiper=new Swiper('.swiper-container');
</script>
</body>
</html>
四、常用参数
滑动参数
我们来看看所有可用参数的列表：
| 参数 | 类型 | 默认 | 描述 |
|---|---|---|---|
| initialSlide | 数 | 0 | 初始幻灯片的索引号。 |
| 方向 | 串 | “水平” | 可以是“水平”或“垂直”（垂直滑块）。 |
| 速度 | 数 | 300 | 幻灯片之间转换的持续时间（以ms为单位） |
| setWrapperSize | 布尔 | 假 | 启用此选项和插件将设置swiper包装上的宽度/高度等于所有幻灯片的总大小。 大多数应该用作不支持flexbox布局的浏览器的兼容性回退选项 |
| virtualTranslate | 布尔 | 假 | 启用此选项，并且swiper将按照常规操作，除非它不会移动，否则将不会设置包装器上的实际翻译值。 当您可能需要创建自定义幻灯片切换时很有用 |
| 宽度 | 数 | 游标宽度（以px为单位）。 参数允许强制Swiper宽度。 仅当您隐藏时初始化Swiper 才有用 。
设置此参数将使Swiper无响应
|
|
| 高度 | 数 | 游标高度（以px为单位）。 参数允许强制Swiper高度。 仅当您隐藏时初始化Swiper 才有用 。
设置此参数将使Swiper无响应
|
|
| autoHeight | 布尔 | 假 | 设置为true ，滑块包装将采用其高度到当前活动幻灯片的高度 |
| roundLengths | 布尔 | 假 | 设置为true以滚动宽度和高度的值，以防止通常的分辨率屏幕上的模糊文本（如果您有） |
| 嵌套 | 布尔 | 假 | 在嵌套的Swiper上设置为true ，以正确触摸事件拦截。 只能使用与父级相同方向的嵌套式扫描器 |
| 自动播放 | |||
| 自动播放 | 数 | - |
转换之间的延迟（以ms为单位）。 如果未指定此参数，将禁用自动播放 如果您需要为specifi幻灯片指定不同的延迟，您可以使用幻灯片上的
|
| autoplayStopOnLast | 布尔 | 假 | 启用此参数，当自动播放到达最后一张幻灯片时将自动停止（在循环模式下无效） |
| autoplayDisableOnInteraction | 布尔 | 真正 | 设置为false并且在用户交互（滑动）后，自动播放将不会被禁用，每次互动后将重新启动 |
| 进展 | |||
| watchSlidesProgress | 布尔 | 假 | 启用此功能可计算每个幻灯片的进度 |
| watchSlidesVisibility | 布尔 | 假 | watchSlidesProgress应该被启用。 启用此选项，在视口中的幻灯片将附加可见类 |
| 自由模式 | |||
| 自由模式 | 布尔 | 假 | 如果为真，则幻灯片将不具有固定位置 |
| freeModeMomentum | 布尔 | 真正 | 如果为真 ，则在释放之后，幻灯片将继续移动一段时间 |
| freeModeMomentumRatio | 数 | 1 | 释放滑块后，较大的值会产生较大的动量距离 |
| freeModeMomentumVelocityRatio | 数 | 1 | 释放滑块后，更高的值会产生较大的动量速度 |
| freeModeMomentumBounce | 布尔 | 真正 | 如果要在自由模式下禁用动量反弹，设置为false |
| freeModeMomentumBounceRatio | 数 | 1 | 较高的价值产生较大的动量反弹效应 |
| freeModeMinimumVelocity | 数 | 0.02 | 触发自由模式动量所需的最小触摸移动速度 |
| freeModeSticky | 布尔 | 假 | 设置为true以启用快照以自由模式滑动位置 |
| 效果 | |||
| 影响 | 串 | '滑动' | 可以是“幻灯片”，“褪色”，“立方体”，“封面”或“翻转” |
| 褪色 | 目的 |
|
淡入效果参数 |
| 立方体 | 目的 |
|
立方体效应参数。 为了获得更好的效果，您可以禁用阴影 |
| Cover Flow功能 | 目的 |
|
Coverflow效果参数。 为了获得更好的效果，您可以禁用阴影 |
| 翻动 | 目的 |
|
翻转效果参数。 limitRotation （启用时）将滑动旋转角度限制在最大180度。 它允许在不同幻灯片之间快速“翻转”。 如果您使用“慢”转换，那么最好禁用它。 |
| 视差 | |||
| 视差 | 布尔 | 假 | 启用，如果要在滑块中使用“视差”元素 |
| 幻灯片网格 | |||
| spaceBetween | 数 | 0 | 幻灯片之间的距离以px为单位。 |
| slidesPerView | 数字或“自动” | 1 |
每个视图的幻灯片数量（幻灯片在滑块的容器上同时可见）。 如果您使用“auto”值和循环：true，那么您需要指定loopedSlides参数与幻灯片数量循环（重复） slidesPerView：“auto”当前与multirow模式不兼容，当slidesPerColumn > 1时 |
| slidesPerColumn | 数 | 1 | 每列的幻灯片数，用于多页布局 |
| slidesPerColumnFill | 串 | '柱' | 可以是“列”或“行”。 定义幻灯片应如何逐行或一行地填充行 |
| slidesPerGroup | 数 | 1 | 设置幻灯片数量以定义和启用组滑动。 有用于slidesPerView> 1 |
| centeredSlides | 布尔 | 假 | 如果为真，则主动幻灯片将居中，而不是始终位于左侧。 |
| slidesOffsetBefore | 数 | 0 | 在容器的开始处（在所有幻灯片之前）添加（以px为单位）的附加幻灯片偏移量） |
| slidesOffsetAfter | 数 | 0 | 在容器的最后添加（以px为单位）的附加滑动偏移量（在所有幻灯片之后） |
| 抓住光标 | |||
| grabCursor | 布尔 | 假 | 此选项可能会稍微改善桌面的可用性。 如果为true ，则在Sweep上悬停时，用户将看到“抓取”光标 |
| 倒是 | |||
| touchEventsTarget | 串 | '容器' | 目标元素来聆听触摸事件。 可以是“容器” （听取swiper-container上的触摸事件）或“包装器” （在swiper-wrapper上收听触摸事件） |
| touchRatio | 数 | 1 | 触摸口粮 |
| touchAngle | 数 | 45 | 允许角度（以度为单位）触发触摸移动 |
| simulateTouch | 布尔 | 真正 | 如果为true，则Swiper将接受鼠标事件（如触摸事件）（单击并拖动以更改幻灯片） |
| shortSwipes | 布尔 | 真正 | 如果要禁用短滑动，请设置为false |
| longSwipes | 布尔 | 真正 | 如果要禁用长滑动，设置为false |
| longSwipesRatio | 数 | 0.5 | 在长时间滑动期间触发滑动到下一张/上一张幻灯片的比例 |
| longSwipesMs | 数 | 300 | 持续时间（以毫秒为单位）在长时间滑动期间触发下一张/上一张幻灯片 |
| followFinger | 布尔 | 真正 | 如果禁用，则只有当您释放它时，滑块将被动画，当您握住手指时不会移动 |
| onlyExternal | 布尔 | 假 | 如果为true，那么切换幻灯片的唯一方法是使用外部API函数，如slidePrev或slideNext |
| 阈 | 数 | 0 | 阈值以px为单位。 如果“触摸距离”将低于此值，则狙击手将不会移动 |
| touchMoveStopPropagation | 布尔 | 真正 | 如果启用，则“touchmove”的传播将被停止 |
| iOSEdgeSwipeDetection | 布尔 | 假 | 启用在iOS UIWebView中释放Swaver事件以进行滑动回放工作 |
| iOSEdgeSwipeThreshold | 数 | 20 | 从屏幕左边缘的区域（以px为单位），在iOS UIWebView中释放触控事件以进行滑动回溯 |
| touchReleaseOnEdges | 布尔 | 假 | 启用在滑块边缘位置（开始，结束）上释放触摸事件以允许进一步的页面滚动 |
| passiveListeners | 布尔 | 真正 | 默认情况下，将使用被动事件侦听器来改善移动设备上的滚动性能。 但是如果你需要使用`e.preventDefault`并且你有冲突，那么你应该禁用这个参数 |
| 触摸电阻 | |||
| 抵抗性 | 布尔 | 真正 | 如果要禁用阻力界限，请设置为false |
| resistanceRatio | 数 | 0.85 | 该选项允许您控制电阻比 |
| 点击 | |||
| preventClicks | 布尔 | 真正 | 设置为true ，以防止在滑动期间意外的不必要的链接点击 |
| preventClicksPropagation | 布尔 | 真正 | 设置为true以在滑动期间停止链接上的点击事件传播 |
| slideToClickedSlide | 布尔 | 假 | 设置为true并单击任何幻灯片将产生转换到此幻灯片 |
| 滑动/无滑动 | |||
| allowSwipeToPrev | 布尔 | 真正 | 设置为false以禁用向上滑动方向滑动（向左或向右） |
| allowSwipeToNext | 布尔 | 真正 | 设置为false以禁用向下滑动方向滑动（向右或向下） |
| noSwiping | 布尔 | 真正 | 将禁用与noSwipingClass中noSwipingClass类匹配的元素的滑动 |
| noSwipingClass | 串 | “刷卡，不刷卡” | 如果为true ，则可以将noSwipingClass类添加到swiper的幻灯片中，以防止/禁用此元素的滑动 |
| swipeHandler | 字符串/ HTMLElement | 空值 | 带有CSS选择器或具有分页的容器的HTML元素的字符串，只能作为刷新的可用处理程序 |
| 导航控件 | |||
| uniqueNavElements | 布尔 | 真正 | 如果启用（默认情况下）和导航元素的参数作为字符串传递（例如".pagination" ），则Swiper将首先通过子元素查找这些元素。 适用于分页，上一个/下一个按钮和滚动条元素 |
| 分页 | |||
| 分页 | 字符串/ HTMLElement | 空值 | 带有CSS选择器的字符串或具有分页的容器的HTML元素 |
| paginationType | 串 | “子弹” | 字符串类型的分页。 可以是“子弹”，“分数”，“进度”或“习惯” |
| paginationHide | 布尔 | 真正 | 点击滑块的容器时，切换（隐藏/真实）分页容器的可见性 |
| paginationClickable | 布尔 | 假 | 如果为true，则单击分页按钮将导致转换到适当的幻灯片。 仅用于子弹分页型 |
| paginationElement | 串 | '跨度' | 定义HTML标签将用于表示单个分页项目符号。 。 仅用于子弹分页型 |
| paginationBulletRender（swiper，index，className） | 功能 | 空值 | 此参数允许完全自定义分页子弹，您需要传递一个接受分页子弹索引号和所需元素类名（ className ）的函数。 仅用于子弹分页型
例如，使用这段代码，我们可以将幻灯片号添加到分页项目符号中：
|
| paginationFractionRender（swiper，currentClassName，totalClassName） | 功能 | 空值 | 此参数允许自定义“分数”分页html。 仅用于分数分页型
例如：
|
| paginationProgressRender（swiper，progressbarClass） | 功能 | 空值 | 此参数允许自定义“进度”分页。 只用于进度分页型
例如：
|
| paginationCustomRender（swiper，当前，总计） | 功能 | 空值 | 自定义分页类型需要此参数，您必须指定它如何呈现
例如：
|
| 导航按钮 | |||
| Next按钮 | 字符串/ HTMLElement | 空值 | 字符串与CSS选择器或元素的HTML元素，将工作像“下一步”按钮后点击它 |
| prevButton | 字符串/ HTMLElement | 空值 | 字符串与CSS选择器或HTML元素的元素，将工作像“上一级”按钮后点击它 |
| Scollbar | |||
| 滚动条 | 字符串/ HTMLElement | 空值 | 带有CSS选择器的字符串或带有滚动条的容器的HTML元素。 |
| scrollbarHide | 布尔 | 真正 | 用户交互后自动隐藏滚动条 |
| scrollbarDraggable | 布尔 | 假 | 设置为true以启用滚动条可拖动，允许您控制滑块位置 |
| scrollbarSnapOnRelease | 布尔 | 假 | 当您释放滚动条时，设置为true以将滑块位置滑动到幻灯片 |
| 无障碍 | |||
| A11Y | 布尔 | 假 | 选择启用键盘辅助功能，为屏幕阅读器提供可用的导航按钮和基本ARIA |
| prevSlideMessage | 串 | “上一张幻灯片” | 前一个按钮的屏幕阅读器消息 |
| nextSlideMessage | 串 | '下一张幻灯片' | 下一个按钮的屏幕阅读器消息 |
| firstSlideMessage | 串 | “这是第一张幻灯片” | 当第一张幻灯片放置时，屏幕阅读器将显示上一个按钮的消息 |
| lastSlideMessage | 串 | “这是最后一张幻灯片” | 当上一张幻灯片放置时，上一个按钮的屏幕阅读器消息 |
| paginationBulletMessage | 串 | '转到幻灯片{{index}}' | 消息为屏幕阅读器为单分页子弹 |
| 键盘/鼠标 | |||
| keyboardControl | 布尔 | 假 | 设置为true可以使用右键和左键（水平模式），顶部和borrom（垂直模式）键盘箭头导航幻灯片 |
| mousewheelControl | 布尔 | 假 | 设置为true可启用导航幻灯片使用鼠标滚轮 |
| mousewheelForceToAxis | 布尔 | 假 | 设置为true以将鼠标滑动到轴。 所以在水平模式下，鼠标滚轮只能用水平滚轮滚动，只能在垂直方向垂直滚动。 |
| mousewheelReleaseOnEdges | 布尔 | 假 | 设置为true并且swiper将释放鼠标滚轮事件并允许页面滚动，当swiper处于边缘位置（在开始或最后） |
| mousewheelInvert | 布尔 | 假 | 设置为true以反转滑动方向 |
| mousewheelSensitivity | 数 | 1 | 鼠标滚轮数据的乘数允许调整鼠标滚轮的灵敏度 |
| mousewheelEventsTarged | 字符串/ HTMLElement | '容器' | 带有CSS选择器的字符串或容器的HTML元素接受鼠标事件。 默认情况下是swiper-container |
| 哈希/历史导航 | |||
| hashnav | 布尔 | 假 | 设置为true以启用散列网址导航到幻灯片 |
| hashnavWatchState | 布尔 | 假 | 设置为true可以通过浏览器历史记录或通过在文档位置上直接设置哈希来导航幻灯片（当hashnav启用时） |
| 历史 | 串 | 启用历史推送状态，其中每个幻灯片都将有自己的网址。 在此参数中，您必须指定主幻灯片网址，如“幻灯片”，并使用data-history属性指定每个幻灯片网址。
|
|
| replaceState | 布尔 | 假 | 除了hashnav或历史之外，还可以使用新的url状态替换新的状态，而不是将其添加到历史 |
| 图片 | |||
| preloadImages | 布尔 | 真正 | 启用时，Swiper将强制加载所有图像 |
| updateOnImagesReady | 布尔 | 真正 | 启用后，所有内部图像（<img>标签）都将被重新初始化。 必需的preloadImages: true |
| 惰性加载 | 布尔 | 假 | 设置为“true”以使图像延迟加载。 请注意， preloadImages应该禁用 |
| lazyLoadingInPrevNext | 布尔 | 假 | 设置为“true”以启用最近的幻灯片图像的延迟加载（对于上一张和下一张幻灯片图像） |
| lazyLoadingInPrevNextAmount | 数 | 1 | 下一张/上一张幻灯片预加载懒惰图片的数量不能小于slidesPerView |
| lazyLoadingOnTransitionStart | 布尔 | 假 | 默认情况下，Swaver将在转换到此幻灯片之后加载懒惰图像，因此如果您需要它在开始转换时开始加载新图像，则可以启用此参数 |
| 循环 | |||
| 循环 | 布尔 | 假 |
设置为true以启用连续循环模式 如果您一直使用 另外，由于循环模式的工作原理，它会添加重复的幻灯片。 这样重复的类将有其他类：
|
| loopAdditionalSlides | 数 | 0 | 创建循环后将被克隆的幻灯片的加法数 |
| loopedSlides | 数 | 空值 | 如果您使用slidesPerView:'auto'与循环模式，您应该告诉Swiper应该使用此参数循环（重复）幻灯片多少张 |
| 放大 | |||
| 放大 | 布尔 | 假 | 设置为true以启用缩放功能 |
| zoomMax | 数 | 3 | 最大图像缩放倍数 |
| zoomMin | 数 | 1 | 最小图像缩放倍数 |
| zoomToggle | 布尔 | 真正 | 通过幻灯片的双击启用/禁用放大 |
| 调节器 | |||
| 控制 | [Swiper Instance] | 未定义 | 通过这个另一个Swaver实例或阵列，其中应该由此Swiper控制的Swiper实例 |
| controlInverse | 布尔 | 假 | 设置为真 ，控制将反向 |
| controlBy | 串 | '滑动' | 可以是'slide'或'container' 。 定义如何控制另一个滑块：滑动幻灯片（相对于其他滑块的网格）或根据所有幻灯片/容器（取决于总滑块百分比） |
| normalizeSlideIndex | 布尔 | 真正 | 在控制模式下规格化幻灯片索引。 参见＃1766 |
| 观察 | |||
| 观察者 | 布尔 | 假 | 设置为true可在Swiper及其元素上启用Mutation Observer。 在这种情况下，如果您更改其样式（如隐藏/显示）或修改其子元素（例如添加/删除幻灯片），则每次更新（重新初始化） |
| observeParents | 布尔 | 假 | 如果您还需要观察Swiper父元素的Mutations，请设置为true |
| 断点 | |||
| 断点 | 目的 | 允许为不同的响应断点（屏幕尺寸）设置不同的参数。 不是所有的参数都可以在断点上改变，只有那些不需要不同布局和逻辑的参数，如slidesPerView ， slidesPerGroup ， spaceBetween 。 诸如slidesPerColumn， loop ， direction ， effect将无法正常工作。 例如：
|
|
| 回调 | |||
| runCallbacksOnInit | 布尔 | 真正 | 运行在[Transition / SlideChange] [开始/结束]回调在swiper初始化。 如果您的initialSlide不为0，或者您使用循环模式，这种回调将在初始化时触发 |
| 的OnInit（刷卡） | 功能 | 回调函数，将在Swiper初始化之后执行 | |
| onSlideChangeStart（刷卡） | 功能 | 回调函数，将在动画开头执行到其他幻灯片（下一个或上一个）。 作为一个参数，接收到swiper实例。 | |
| onSlideChangeEnd（刷卡） | 功能 | 回调函数，将在动画后执行到其他幻灯片（下一个或上一个）。 接收滑块实例作为参数。 | |
| onSlideNextStart（刷卡） | 功能 | 与“onSlideChangeStart”相同，但与“forward”方向相同 | |
| onSlideNextEnd（刷卡） | 功能 | 与“onSlideChangeEnd”相同，但与“forward”方向相同 | |
| onSlidePrevStart（刷卡） | 功能 | 与“onSlideChangeStart”相同，仅适用于“向后”方向 | |
| onSlidePrevEnd（刷卡） | 功能 | 与“onSlideChangeEnd”相同，但与“向后”方向相同 | |
| onTransitionStart（刷卡） | 功能 | 回调函数，将在转换开始时执行。 作为一个参数，接收到swiper实例。 | |
| onTransitionEnd（刷卡） | 功能 | 回调函数，将在转换后执行。 接收滑块实例作为参数。 | |
| onTouchStart（swiper，event） | 功能 | 回调功能，当用户触摸Swiper时将执行。 接收到swiper实例和“touchstart”事件作为参数。 | |
| onTouchMove（swiper，event） | 功能 | 回调功能，当用户触摸并移动手指在Swiper上时，将执行回调功能。 接收到swiper实例和“touchmove”事件作为参数。 | |
| onTouchMoveOpposite（swiper，event） | 功能 | 回拨功能，当用户触摸并移动手指方向与方向参数相反的方向时，将执行回调功能。 接收到swiper实例和“touchmove”事件作为参数。 | |
| onSliderMove（swiper，event） | 功能 | 回拨功能，当用户触摸并移动手指并移动它时，将执行。 接收到swiper实例和“touchmove”事件作为参数。 | |
| onTouchEnd（swiper，event） | 功能 | 回调功能，当用户释放Swiper时将执行。 接收到swiper实例和“touchend”事件作为参数。 | |
| onClick（swiper，event） | 功能 | 回调功能，当用户在300ms延迟后点击/点击Swiper时，将执行。 接收到swiper实例和“touchend”事件作为参数。 | |
| onTap（swiper，event） | 功能 | 回调功能，当用户点击/点击Swiper时，将执行回调功能。 接收到swiper实例和“touchend”事件作为参数。 | |
| onDoubleTap（swiper，event） | 功能 | 回调功能，当用户双击Swiper的容器时，将执行该功能。 接收到swiper实例和“touchend”事件作为参数 | |
| onImagesReady（刷卡） | 功能 | 回调函数将在所有内部图像加载后执行。 updateOnImagesReady也应该被启用 |
|
| onProgress（swiper，progress） | 功能 | 回调函数将在Swiper进程更改时执行，因为第二个参数接收始终从0到1的进度 | |
| onReachBeginning（刷卡） | 功能 | 回调功能，当Swiper到达其初始位置时，将执行回调功能 | |
| onReachEnd（刷卡） | 功能 | 回调功能，当Swiper到达最后一张幻灯片时，将执行回调功能 | |
| 的onDestroy（刷卡） | 功能 | 回调函数，当您销毁Swiper时将执行 | |
| onSetTranslate（swiper，translate） | 功能 | 回调函数将在swiper的包装器更改其位置时执行。 接收swiper实例和当前转换值作为参数 | |
| onSetTransition（swiper，transition） | 功能 | 回调函数，每当swiper启动动画时都将执行。 接收到swiper实例和当前转换持续时间（以ms为单位）作为参数 | |
| onAutoplay（刷卡） | 功能 | 与onSlideChangeStart相同，但是由自动播放引起 |
|
| onAutoplayStart（刷卡） | 功能 | 回调功能，当自动播放开始时执行 | |
| onAutoplayStop（刷卡） | 功能 | 回调功能，当自动播放停止时执行 | |
| onLazyImageLoad（swiper，slide，image） | 功能 | 回调函数，将在开始延迟加载图像时执行 | |
| onLazyImageReady（swiper，slide，image） | 功能 | 回调函数，将在加载加载图像的时候执行 | |
| onPaginationRendered（swiper，paginationContainer） | 功能 | 回调函数，将在分页元素生成并添加到DOM后执行 | |
| onScroll（swiper，e） | 功能 | 回调函数，当滑块滑动或滚动鼠标控制时，将执行 | |
| onBeforeResize（刷卡） | 功能 | 回调函数，将在swiper的onresize操作之前在窗口调整大小上执行 | |
| onAfterResize（刷卡） | 功能 | 回调函数，将在swiper的onresize操作之后立即执行窗口调整大小 | |
| onKeyPress（swiper，kc） | 功能 | 回调功能，当启用键盘控制时，将执行“keydown”事件 | |
| 命名空间 | |||
| containerModifierClass | 串 | “刷卡，盛器” | 根据不同的参数可以添加到swiper容器中的修饰符CSS类的开头 |
| slideClass | 串 | “刷卡滑动” | CSS类名称的幻灯片 |
| slideActiveClass | 串 | “刷卡滑动活性” | 当前活动幻灯片的CSS类名称 |
| slideDuplicatedActiveClass | 串 | “刷卡-滑动重复活性” | 表示当前活动幻灯片的重复幻灯片的CSS类名称 |
| slideVisibleClass | 串 | “刷卡滑块可见” | 当前可见幻灯片的CSS类名称 |
| slideDuplicateClass | 串 | “刷卡，滑动式两份” | 通过循环模式复制的幻灯片的CSS类名称 |
| slideNextClass | 串 | “刷卡-滑动下一个” | 当前活动幻灯片之后的幻灯片的CSS类名称 |
| slideDuplicatedNextClass | 串 | “刷卡滑块重复的，下一个” | 重复幻灯片的CSS类名称，表示活动幻灯片旁边的幻灯片 |
| slidePrevClass | 串 | “刷卡-滑动下一页” | 当前活动幻灯片之前的幻灯片的CSS类名称 |
| slideDuplicatedPrevClass | 串 | “刷卡，滑动式两份，下一页” | 复制幻灯片的CSS类名称，表示活动幻灯片前的幻灯片 |
| wrapperClass | 串 | “刷卡的方式包装” | 幻灯片包装器的CSS类名称 |
| bulletClass | 串 | “刷卡-分页子弹” | 单个分页子弹的CSS类名称 |
| bulletActiveClass | 串 | “刷卡-分页子弹激活状态” | 当前活动的分页项目符号的CSS类名称 |
| paginationHiddenClass | 串 | “刷卡-分页隐藏” | 当CSS变为非活动状态时，分类的CSS类名称 |
| paginationCurrentClass | 串 | “刷卡-分页电流” | 具有当前活动索引的元素的CSS类名称为“分数”分页 |
| paginationTotalClass | 串 | “刷卡-分页计” | 在“分数”分页中具有总数“快照”的元素的CSS类名称 |
| paginationProgressbarClass | 串 | “刷卡，分页，进度” | 分页进度栏的CSS类名称 |
| paginationClickableClass | 串 | “刷卡，分页，点击” | CSS类名称设置为可分页时的分页 |
| paginationModifierClass | 串 | “刷卡，pagination-” | 修饰符CSS类名称的开头将根据参数添加到分页 |
| buttonDisabledClass | 串 | “刷卡按钮禁用” | 下一个/ prev按钮的CSS类名称禁用时 |
| lazyLoadingClass | 串 | “刷卡懒” | CSS类名称的lazy元素 |
| lazyStatusLoadingClass | 串 | “刷卡懒加载” | CSS类名称为lazy加载元素 |
| lazyStatusLoadedClass | 串 | “刷卡-延迟加载” | CSS类名称为lazy加载的元素 |
| lazyPreloaderClass | 串 | “刷卡懒惰，预加载” | 懒惰预加载器的CSS类名称 |
| preloaderClass | 串 | “预加载” | 附加懒惰预加载器的CSS类名称 |
| zoomContainerClass | 串 | “刷卡变焦容器” | 缩放容器的CSS类名称 |
| notificationClass | 串 | “刷卡通知” | CSS类名称为a11通知 |
滑块方法和属性
在我们初始化Slider之后，我们将其初始化的实例变量（ mySwiper例的mySwiper变量）和有用的方法和属性：
| 属性 | |
|---|---|
| mySwiper.params | 对象具有传递初始化参数 |
| mySwiper.container | 具有滑块容器HTML元素的Dom7 / jQuery元素。 获取香草HTMLElement使用mySwiper.container[0] |
| mySwiper.wrapper | Dom7 / jQuery元素与滑块包装HTML元素。 要获得香草HTMLElement使用mySwiper.wrapper[0] |
| mySwiper.slides | Dom7 / jQuery数组式的幻灯片集HTML元素。 要获得特定幻灯片HTMLElement使用mySwiper.slides[1] |
| mySwiper.nextButton | Dom7 / jQuery元素与下一个按钮的HTML元素。 要获得香草HTMLElement使用mySwiper.nextButton[0] |
| mySwiper.prevButton | Dom7 / jQuery元素与prev按钮的HTML元素。 获取香草HTMLElement使用mySwiper.prevButton[0] |
| mySwiper.bullets | 分页按钮HTML元素的Dom7 / jQuery集合。 要获得特定幻灯片HTMLElement使用mySwiper.bullets[1] |
| mySwiper.width | 容器宽度 |
| mySwiper.height | 容器高度 |
| mySwiper.translate | 包装翻译的当前值 |
| mySwiper.progress | 包装翻译的当前进度（从0到1） |
| mySwiper.activeIndex |
当前活动幻灯片的索引号 请注意，在循环模式下，有效索引值将始终在多个循环/复制的幻灯片上移动 |
| mySwiper.realIndex |
在循环模式下考虑复制幻灯片的当前活动幻灯片的索引号 |
| mySwiper.previousIndex | 以前活动的幻灯片的索引号 |
| mySwiper.isBeginning | 如果滑块位于大多数“左”/“顶”位置， 则为true |
| mySwiper.isEnd | 如果滑块位于大多数“右”/“底”位置， 则为true |
| mySwiper.autoplaying | 如果启用自动播放， 则为true |
| mySwiper.animating | 如果扳手处于转换状态，则为真 |
| mySwiper.touches | 具有以下触摸事件属性的对象：
|
| mySwiper.clickedIndex | 最后点击的幻灯片的索引号 |
| mySwiper.clickedSlide | 链接到最后点击的幻灯片（ HTMLElement ） |
| 方法 | |
| mySwiper.slideNext（ runCallbacks ， speed ）; | 运行转换到下一张幻灯片
|
| mySwiper.slidePrev（ runCallbacks ， speed ）; | 运行转换到上一张幻灯片
|
| mySwiper.slideTo（ index ， speed ， runCallbacks ）; | 运行转换到幻灯片，索引号等于'index'参数，持续时间等于'speed'参数。
|
| mySwiper.update（updateTranslate）; |
此方法包括updateContainerSize，updateSlidesSize，updateProgress，updatePagination和updateClasses方法 您可以在手动添加/删除幻灯片之后或隐藏/显示幻灯片之后调用它，也可以使用Swiper进行任何自定义DOM修改
此方法还包括以下方法的小部分，您可以单独使用以下方法：
|
| mySwiper.onResize（）; | 调整浏览器大小时，Swiper会执行此方法。 它几乎与.update()相同，但有点软，没有硬设置的翻译 |
| mySwiper.detachEvents（）; | 分离所有事件监听器 |
| mySwiper.attachEvents（）; | 再次听到所有的事件听众 |
| mySwiper.startAutoplay（）; | 开始自动播放。 对于自定义“播放”和“暂停”按钮可能很有用 |
| mySwiper.stopAutoplay（）; | 停止自动播放 对于自定义“播放”和“暂停”按钮可能很有用 |
| mySwiper.destroy（deleteInstance，cleanupStyles）; | 销毁滑块实例并分离所有事件监听器，其中
|
| mySwiper.appendSlide（幻灯片）; | 添加新的幻灯片到最后。 slides可以是HTMLElement或HTML字符串与新的幻灯片或阵列与这样的幻灯片，例如：
|
| mySwiper.prependSlide（幻灯片）; | 添加新的幻灯片开始。 slides可以是HTMLElement或HTML字符串与新的幻灯片或阵列与这样的幻灯片，例如：
|
| mySwiper.removeSlide（slideIndex）; | 删除所选的幻灯片。 slideIndex可以是一个带有索引的幻灯片索引或数组的数字，例如：
|
| mySwiper.removeAllSlides（）; | 删除所有幻灯片 |
| mySwiper.setWrapperTranslate（平移）; | 为swiper封装设置自定义css3 transform的转换值 |
| mySwiper.getWrapperTranslate（）; | 获取swiper包装器的当前值css3 transform translate |
| mySwiper.on（回调，处理程序） | 添加回调/事件处理程序 |
| mySwiper.once（回调，处理程序） | 添加仅执行一次的事件/回调 |
| mySwiper.off（回调） | 删除指定回调/事件的所有处理程序 |
| mySwiper.lockSwipeToNext（） mySwiper.unlockSwipeToNext（） |
禁用（锁定）/启用（解锁）能力滑动到下一张幻灯片 |
| mySwiper.lockSwipeToPrev（） mySwiper.unlockSwipeToPrev（） |
禁用（锁定）/启用（解锁）能力滑动到以前的幻灯片 |
| mySwiper.lockSwipes（） mySwiper.unlockSwipes（） |
禁用（锁定）/启用（解锁）能力来更改幻灯片 |
| mySwiper.disableMousewheelControl（）; | 禁用鼠标滚轮控制 |
| mySwiper.enableMousewheelControl（）; | 启用鼠标滚轮控制 |
| mySwiper.disableKeyboardControl（）; | 禁用键盘控制 |
| mySwiper.enableKeyboardControl（）; | 启用键盘控制 |
| mySwiper.disableTouchControl（）; | 禁用触摸控制 |
| mySwiper.enableTouchControl（）; | 启用触摸控制 |
| mySwiper.unsetGrabCursor（）; | 取消设置抓取光标 |
| mySwiper.setGrabCursor（）; | 设置抓取光标 |
哈希导航
哈希导航意图具有特定的幻灯片上的链接，允许与特定的幻灯片打开加载页面。
为了使它工作，你需要通过传递来启用它hashnav:true的参数和添加幻灯片在散列data-hash属性：
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" data-hash="slide1">Slide 1</div> <div class="swiper-slide" data-hash="slide2">Slide 2</div> <div class="swiper-slide" data-hash="slide3">Slide 3</div> <div class="swiper-slide" data-hash="slide4">Slide 4</div> <div class="swiper-slide" data-hash="slide5">Slide 5</div> ... </div> </div>
var swiper = new Swiper('.swiper-container', { //enable hash navigation hashnav: true })
视差
由于版本3.0.3组队，探索支持刷卡视差过渡效果/滑动嵌套元素。有支持的两种类型的视差的元素：
- 直接子元素
swiper-container。对于这样的元件视差效应将取决于总滑块进展。有用的视差背景 - 幻灯片子元素。对于这样的元件视差效应将依赖于滑动进展
为了使您需要初始化组队，探索与通过视差效果parallax:true参数，并添加data-swiper-parallax所需的元素属性
<div class="swiper-container"> <!-- Parallax background element --> <div class="parallax-bg" style="background-image:url(http://lorempixel.com/900/600/nightlife/2/)" data-swiper-parallax="-23%"> </div> <div class="swiper-wrapper"> <div class="swiper-slide"> <!-- Each slide has parallax title --> <div class="title" data-swiper-parallax="-100">Slide 1</div> <!-- Parallax subtitle --> <div class="subtitle" data-swiper-parallax="-200">Subtitle</div> <!-- And parallax text with custom transition duration --> <div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600"> <p>Lorem ipsum dolor sit amet, ...</p> </div> </div> ... </div> </div>
与所有指定的元素data-swiper-parallax属性将具有视差的转变。这个属性可以接受：
- 数 -在像素值（作为标题，副标题例如上文），这取决于移动进度元件。在这种情况下，这种元件将在以像素根据滑动位置移动±此值（下一个或上一个）
- 百分比 - （作为“视差-BG”）根据进展情况，并在其大小以移动元素。在这种情况下，这种元件将在根据滑动位置移动±它的大小（在水平方向上的宽度，和在垂直方向的高度）的该百分比（下一个或上一个）。所以，如果元件具有400像素的宽度和指定数据刷卡视差=“50％”，则它会在±200像素被移动
它可以通过使用覆盖视差方向data-swiper-parallax-x和data-swiper-parallax-y与相同的规则属性
您也可以通过自定义的转换时间通过添加视差的元素data-swiper-parallax-duration属性。
懒加载
要启用延迟加载，首先我们需要对图像或元素在幻灯片底色特殊布局：
<div class="swiper-container"> <div class="swiper-wrapper"> <!-- Lazy image --> <div class="swiper-slide"> <img data-src="path/to/picture-1.jpg" class="swiper-lazy"> <div class="swiper-lazy-preloader"></div> </div> <!-- Lazy image with srscet--> <div class="swiper-slide"> <img data-src="path/to/logo-small.png" data-srcset="path/logo/logo-large.png 2x" class="swiper-lazy"> <div class="swiper-lazy-preloader"></div> </div> <!-- Element with lazy background image --> <div class="swiper-slide"> <div data-background="path/to/picture-2.jpg" class="swiper-lazy"> <div class="swiper-lazy-preloader"></div> </div> </div> <!-- Lazy background image on slide itself --> <div data-background="path/to/picture-3.jpg" class="swiper-slide swiper-lazy"> <div class="swiper-lazy-preloader"></div> </div> </div> </div>
如你所见：
- 每个延迟加载图像/元件应该具有附加的“刷卡-懒”类
- 为<IMG>元素应该在“数据-SRC”属性中指定的，而不是“SRC”懒图像源
- 懒惰图像源为<IMG>元素应该在“数据srcset”属性中指定的，而不是“srcset”设置
- 懒惰背景图像源应“数据的背景”中指定属性
您也可以添加动画预加载微调下滑，这将图像加载后会自动将其删除：
<div class="swiper-lazy-preloader"></div>
或白一暗布局：
<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
之后，我们需要启用组队，探索初始化延迟加载：
var swiper = new Swiper('.swiper-container', { // Disable preloading of all images preloadImages: false, // Enable lazy loading lazyLoading: true });
如果您使用slidesPerView“自动”或slidesPerView> 1，那么你也应该启用watchSlidesVisibility和组队，探索将目前可见的幻灯片加载图像
放大
刷卡支持缩放图像的功能（类似于你所看到的在iOS浏览单张照片时），您可以通过缩放手势放大图像和或放大/缩小由上双击。在这种情况下，需要额外的布局：
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-side"> <div class="swiper-zoom-container"> <img src="path/to/image1.jpg"> </div> </div> <div class="swiper-side"> <div class="swiper-zoom-container"> <img src="path/to/image2.jpg"> </div> </div> <div class="swiper-side">Plain slide with text</div> <div class="swiper-side"> <!-- Override maxZoom parameter --> <div class="swiper-zoom-container" data-swiper-zoom="5"> <img src="path/to/image1.jpg"> </div> </div> </div> </div>
所有“可缩放的”图像应该与股利包裹swiper-zoom-container类。请注意，它不支持缩放任何东西，除了单个图像别的。
您可以重写maxZoom通过使用特定的幻灯片参数data-swiper-zoom上变焦容器的属性。
发射API /活动
发射器API允许你添加事件/回调刷卡像往常一样的事件，甚至组队，探索初始化后：
// Init Swiper var mySwiper = new Swiper('.swiper-container'); // Later add callback mySwiper.on('slideChangeStart', function () { console.log('slide change start'); }); // Add one more handler for this event mySwiper.on('slideChangeStart', function () { console.log('slide change start 2'); }); // Add handler that will be executed only once mySwiper.once('sliderMove', function () { console.log('slider moved'); }); // Somewhen later, remove all slideChangeStart handlers mySwiper.off('slideChangeStart');
请注意，在这种情况下，该回调/事件名称是一样平常回调的名字，但没有“开”和小写的第一个字符，所以“onTouchMove”只是becames“touchMove”
进入组队，探索的实例
如果您在使用HTML初始化组队，探索它仍然可以访问到组队，探索的实例。这是swiper组队，探索的HTML容器元素的属性：
var mySwiper = $('.swiper-container')[0].swiper; // Now you can use all slider methods like mySwiper.slideNext();
自定义生成
由于3.4.0版本组队，探索带有咕嘟咕嘟建设者，允许建立自定义库的版本，你可以只包括需要的模块。 我们需要以下内容：
- 下载并解压缩组队，探索的GitHub资源库本地文件夹
- Node.js的安装（如果没有安装）
- 通过在终端执行以下命令安装咕嘟咕嘟（如果没有安装）：
$ npm install --global gulp - 现在，我们需要安装所需的依赖关系。转到与下载并解压组队，探索库中的文件夹，并在终端执行：
$ npm install - 现在，我们准备建立Framework7的定制版本。我们需要执行吞掉自定义命令和传递组件/我们要作为参数模块。例如，如果我们只想包括手风琴和标签：
$ gulp custom -zoom,lazy-loading,effects注意，不应该有逗号和组件名称之间的空格 - 就这些。 现在你应该看到新的自定义/文件夹将包含自定义的JS和CSS文件及其缩小的版本
五、详解参数
1、parallax
如需要开启视差效果（相对父元素移动），设置为true并在所需要的元素上增加data-swiper-parallax属性。
自从3.03版本后Swiper为swiper和slide内元素增加视差效果。有两种表现形式：
1. 对于swiper-container的子元素，视差效果基于swiper的progress（0-1之间的小数，如有三个slide则是0->0.5->1）。
2. 对于slides的子元素，视差效果基于slide的progress（1，0，-1，当前slide向左是从0->1，向右是从0->-1）。
data-swiper-parallax接受两种类型的参数。
1. number（单位：px），移动距离=number*progress。
2. percentage（百分比），移动距离=元素宽度*percentage*progress。
你还可以通过data-swiper-parallax-x 和 data-swiper-parallax-y单独设定其移动方向。
还可通过data-swiper-parallax-duration设定动画持续时间（可选），单位毫秒，默认值是Swiper的speed。
例：swiper内有5个slide，则swiper的progress是 0，0.25，0.5，0.75，1。
swiper-container的子元素，设定了data-swiper-parallax=1000，当slide从0过渡到1时（初始向右滑动），该元素向右移动250px。
slides的子元素，设定了data-swiper-parallax=1000，当slide从0过渡到1时（初始向右滑动），该元素相对于slide从0向右移动到250px处。nextslide内元素相对于slide从-250px向右移动0px处。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="dist/css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
background: #000;
}
.swiper-slide {
font-size: 18px;
color:#fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 60px;
}
.parallax-bg {
position: absolute;
left: 0;
top: 0;
width: 130%;
height: 100%;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
}
.swiper-slide .title {
font-size: 41px;
font-weight: 300;
}
.swiper-slide .subtitle {
font-size: 21px;
}
.swiper-slide .text {
font-size: 14px;
max-width: 400px;
line-height: 1.3;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="parallax-bg" style="background-image:url(http://lorempixel.com/900/600/nightlife/2/)" data-swiper-parallax="-23%"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-100">Slide 1</div>
<div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
<div class="text" data-swiper-parallax="-300">
<p>Lorem ipsum dolor sit </p>
</div>
</div>
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-100">Slide 2</div>
<div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
<div class="text" data-swiper-parallax="-300">
<p>Lorem ipsum dolor sit amet, c</p>
</div>
</div>
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-100">Slide 3</div>
<div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
<div class="text" data-swiper-parallax="-300">
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-white"></div>
<!-- Add Navigation -->
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</div>
<!-- Swiper JS -->
<script src="dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
parallax: true,
speed: 1000,
});
</script>
</body>
</html>
2、hashnav
如需为每个slide增加散列导航（有点像锚链接）。将hashnav设置为true，并在每个slide处增加data-hash属性。
这样当你的swiper切换时你的页面url就会加上这个属性的值了，你也可以通过进入页面时修改页面url让swiper在初始化时切换到指定的slide。
你可以直接跳转到指定的slide。比如这样：直接跳到第三个slide。
如果需要浏览器的前进后退按钮配合控制，需要加上hashnavWatchState
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="dist/css/swiper.min.css">
<script src="dist/js/swiper.min.js"></script>
<!-- Demo styles -->
<style>
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 500px;
height: 300px;
margin: 20px auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-hash="slide1">
slider1
</div>
<div class="swiper-slide" data-hash="slide2">
slider2
</div>
<div class="swiper-slide" data-hash="slide3">
slider3
</div>
</div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
hashnav:true,
})
</script>
</body>
</html>
效果：
3、history
设为任意string则开启history并以这个string为URL前缀。
在slide切换时无刷新更换URL和浏览器的history.state(pushState)。这样每个slide都会拥有一个自己的URL。
使用history还必需在slide上增加一个属性data-history，例<div class="swiper-slide" data-history="slide1"></div>
开启history会取消hashnav
http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1846&page=1&extra=#pid36729
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" data-history="1">
Slide 1
</div>
<div class="swiper-slide" data-history="Slide 2">
Slide 2
</div>
<div class="swiper-slide" data-history="3">
Slide 3
</div>
</div>
</div>
<script>
var swiper = new Swiper('.swiper-container', {
history: 'love',
});
</script>