swper_Swiper 中文API手册(share)

Swiper是一款流行的滑动组件,本文档提供了详细的API使用教程。包括如何下载、引入CSS和JS,设置HTML布局,调整Swiper尺寸,初始化Swiper,以及各种参数和回调函数的使用方法。同时,还介绍了滑动控制、分页器、键盘控制、鼠标滚轮控制等功能。
摘要由CSDN通过智能技术生成

Usage:

1、下载swiper最新版本https://github.com/nolimits4web/Swiper

2、在HTML Head中添加Swiper's CSS and JS:

1

2 ....

3

4

5 ....

6

其中引用的文件名以下载的为准。

3、使用下面的HTML布局

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

4、打开下载的文件中的idangerous.swiper.css,设置Swiper's的宽度以及高度(在文件的末尾)

/* 指定swiper 容器尺寸: */

.swiper-container, .swiper-slide {width:500px;height:200px;

}

5、初始化Swiper 在文档开始处,(或在窗口加载时)

1

2 /*======

3 使用文档添加事件或窗口加载事件

4 例如:

5 window.onload = function() { ...代码 ...}

6 或者document.addEventListener('DOMContentLoaded', function(){ ...代码... }, false)

7 =======*/

8 window.onload = function() {

9 var mySwiper = new Swiper('.swiper-container',{

10 //添加需要的选项:

11 mode:'horizontal',

12 loop: true

13 //等等..

14 });

15 }

16 })

17

API:

new Swiper(container,options)

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

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

用法:

1 var mySwiper = new Swiper(".swiper-container",{

2 speed:750,

3 mode:"vertical"

4 })

返回拥有众多有用函数(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(说明)

speed

number

300

600

slides滑块动画之间的持续时间(单位ms)

eventTarget

string

'wrapper'

'container'

swipers事件对象,默认状态下所有的触控事件只能用于wrapper。如若需要其他元素包含在container内以及使用swipers,那么可以使用'container'. 2.4.2版本新增

autoplay

number

5000

-

过渡延迟时间(单位ms),参数没有指定的情况下,不生效,(补充:当用户操作

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值