配置选项

Swiper2.x的全部配置选项、方法、函数

Swiper初始化
new Swiper(container,options)
Basic(Swiper基础选项)
autoplay:0
speed:300
eventTarget:wrapper
autoplayDisableOnInteraction:true
autoplayStopOnLast:false
mode:horizontal
loop:false
loopAdditionalSlides:0
slidesPerView:1
loopedSlides:1
slidesPerViewFit:true
slidesPerGroup:1
calculateHeight:false
roundLengths:false
cssWidthAndHeight:false
updateOnImagesReady:true
releaseFormElements:true
watchActiveIndex:false
visibilityFullFit:false
autoResize:true
resizeReInit:false
DOMAnimation:true
resistance:true
noSwiping:false
preventLinks:true
preventLinksPropagation:false
initialSlide:0
useCSS3Transforms:true
Free Mode (free模式/抵抗反弹)
freeMode:false
freeModeFluid:false
scrollContainer:false
momentumRatio:1
momentumBounce:true
momentumBounceRatio:1
Slides offset (slides位移选项)
centeredSlides:false
offsetPxBefore:0
offsetPxAfter:0
offsetSlidesBefore:0
offsetSlidesAfter:0
Touch/mouse interactions (触发Swiper选项)
touchRatio:1
simulateTouch:true
onlyExternal:false
followFinger:true
grabCursor:false
shortSwipes:true
longSwipesRatio:0.5
moveStartThreshold:false
swipeToNext:true
swipeToPrev:true
Navigation (鼠标、键盘控制选项)
keyboardControl:false
mousewheelControl:false
mousewheelControlForceToAxis:false
Pagination(分页器选项)
pagination:
paginationClickable:false
paginationAsRange:true
createPagination:true
Namespace (命名空间)
wrapperClass:swiper-wrapper
slideClass:swiper-slide
slideActiveClass:swiper-slide-active
slideVisibleClass:swiper-slide-visible
slideElement:div
noSwipingClass:swiper-no-swiping
paginationElement:span
paginationElementClass:swiper-pagination-switch
paginationActiveClass:swiper-active-switch
paginationVisibleClass:swiper-visible-switch
Callbacks (回调函数)
addCallback:function(){...}
fireCallback:function(){...}
removeCallbacks:function(){...}
queueStartCallbacks:function(){...}
queueEndCallbacks:function(){...}
onFirstInit:function(){...}
onInit:function(){...}
onSwiperCreated:function(){...}
onTouchStart:function(){...}
onTouchMove:function(){...}
onTouchEnd:function(){...}
onSlideReset:function(){...}
onSlideChangeStart:function(){...}
onSlideChangeEnd:function(){...}
onSlideNext:function(){...}
onSlidePrev:function(){...}
onSlideClick:function(){...}
onSlideTouch:function(){...}
onImagesReady:function(){...}
onMomentumBounce:function(){...}
onAutoplayStop:function(){...}
onAutoplayStart:function(){...}
onResistanceBefore:function(){...}
onResistanceAfter:function(){...}
onSetWrapperTransition:function(){...}
onSetWrapperTransform:function(){...}
Function (Swiper函数)
disableMousewheelControl()
enableMousewheelControl()
enableKeyboardControl()
disableKeyboardControl()
swipeNext()
swipePrev()
swipeTo(index,speed,runCallbacks)
activeSlide()
startAutoplay()
stopAutoplay()
destroy(removeResizeEvent)
resizeFix()
reInit()
getWrapperTranslate(axis)
setWrapperTranslate(x,y,z)
wrapperTransitionEnd()
setTransform(instance,Transform)
setTransition(instance,duration)
Method (Swiper方法)
browser.ie10
browser.ie8
support.touch
support.transforms
support.transforms3d
support.transitions
clickedSlideIndex
clickedSlide
activeIndex
activeLoopIndex
activeLoaderIndex
previousIndex
width
height
isTouched
positions
touches
params
增加、删除Slide
createSlide(html,slideClassList,element)
slides
appendSlide(HTML,slideClassList,element)
appendSlide(slideInstance)
prependSlide(HTML,slideClassList,element)
prependSlide(slideInstance)
insertSlideAfter(index,HTML,slideClassList,element)
insertSlideAfter(index,slideInstance)
removeSlide(index)
removeLastSlide()
removeAllSlides()
getSlide(index)
getLastSlide()
getFirstSlide()
控制slide
append()
prepend()
remove()
getWidth()
getHeight()
getOffset()
insertAfter(index)
clone()
设置slide
html(innerHTML)
index()
isActive()
setData(name,value)
getData(name)
data(name,value)
data(name)
Swiper 3D flow插件参数
rotate
stretch
depth
modifier
shadows
Swiper Scrollbar插件参数
container
draggable
hide
snapOnRelease
dragSize
onScrollbarDrag


setTransform(instance,Transform)

为一个slide设置变形效果。
instance:效果施加的对象。
Transform:CSS3 Transform 属性。多个属性之间用空格分开。

CSS3 Transform 属性参考


描述
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。



setTransform(instance,Transform)参数

类型:
默认:
举例:

效果演示

使用方法示例

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
onInit: function(swiper){
      swiper.setTransform(swiper.slides[0],'translate3d(100px,0,0) scale(0.5)');
    }
})
</script>

转载原创文章请注明:文章转载自:Swiper中文网 [https://2.swiper.com.cn]
本文地址:https://2.swiper.com.cn/api/function/2015/0213/189.html