配置选项

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

Swiper初始化
new Swiper(swiperContainer, parameters)
Basic(Swiper一般选项)
initialSlide:0
direction:horizontal
speed:300
autoplay:0
autoplayDisableOnInteraction:true
autoplayStopOnLast:false
grabCursor:false
parallax:false
hashnav:false
hashnavWatchState:false
history:
replaceState:false
setWrapperSize:false
virtualTranslate:false
a11y:false
width:
height:
roundLengths:false
breakpoints:
autoHeight:false
nested:false
Progress(进度)
watchSlidesProgress:false
watchSlidesVisibility:false
Free Mode (free模式/抵抗反弹)
freeMode:false
freeModeMomentum:true
freeModeMomentumRatio:1
freeModeMomentumVelocityRatio:1
freeModeMomentumBounce:true
freeModeMomentumBounceRatio:1
freeModeSticky:false
Slides grid (网格分布)
centeredSlides:false
slidesPerView:1
slidesPerGroup:1
spaceBetween:0
slidesPerColumn:1
slidesPerColumnFill:column
slidesOffsetBefore:0
slidesOffsetAfter:0
Effects (切换效果)
effect:slide
fade:
cube:
coverflow:
flip:
Clicks (点击)
preventClicks:true
preventClicksPropagation:true
slideToClickedSlide:false
Touches(触发条件)
touchRatio:1
simulateTouch:true
onlyExternal:false
followFinger:true
shortSwipes:true
longSwipesRatio:0.5
threshold:false
touchAngle:45
longSwipes:true
longSwipesMs:300
touchMoveStopPropagation:true
resistance:true
resistanceRatio:0.85
iOSEdgeSwipeDetection:false
iOSEdgeSwipeThreshold:20
passiveListeners:true
touchReleaseOnEdges:false
Swiping / No swiping(禁止切换)
noSwiping:true
noSwipingClass:swiper-no-swiping
allowSwipeToNext:true
allowSwipeToPrev:true
swipeHandler:null
Pagination(分页器)
pagination:null
paginationType:bullets
paginationClickable:false
paginationHide:false
paginationElement:span
paginationBulletRender(index, c:null
paginationFractionRender():null
paginationProgressRender():null
paginationCustomRender():null
uniqueNavElements:true
Navigation Buttons(前进后退按钮)
nextButton:null
prevButton:null
Scollbar(滚动条)
scrollbar:null
scrollbarHide:true
scrollbarDraggable:false
scrollbarSnapOnRelease:false
Keyboard / Mousewheel (鼠标、键盘控制选项)
keyboardControl:false
mousewheelControl:false
mousewheelForceToAxis:false
mousewheelReleaseOnEdges:false
mousewheelInvert:false
mousewheelSensitivity:1
mousewheelEventsTarged:container
Images (图片选项)
preloadImages:true
updateOnImagesReady:true
lazyLoading:false
lazyLoadingInPrevNext:false
lazyLoadingInPrevNextAmount:1
lazyLoadingOnTransitionStart:false
Loop (环路)
loop:false
loopAdditionalSlides:0
loopedSlides:1
Zoom (调焦)
zoom:false
zoomMax:3
zoomMin:1
zoomToggle:true
Controller (双向控制)
control:null
controlInverse:false
controlBy:slide
normalizeSlideIndex:true
Observer (监视器)
observer:false
observeParents:false
Callbacks (回调函数)
onInit(swiper):function(){...}
onTouchStart(swiper, event):function(){...}
onTouchMove(swiper, event):function(){...}
onTouchEnd(swiper, event):function(){...}
onSlideChangeStart(swiper):function(){...}
onSlideChangeEnd(swiper):function(){...}
onImagesReady(swiper):function(){...}
runCallbacksOnInit:function(){...}
onTransitionStart(swiper):function(){...}
onTransitionEnd(swiper):function(){...}
onTouchMoveOpposite(swiper, eve:function(){...}
onSliderMove(swiper, event):function(){...}
onClick(swiper, event):function(){...}
onTap(swiper, event):function(){...}
onDoubleTap(swiper, event):function(){...}
onProgress(swiper, progress):function(){...}
onReachBeginning(swiper):function(){...}
onReachEnd(swiper):function(){...}
onDestroy(swiper):function(){...}
onAutoplay(swiper):function(){...}
onAutoplayStart(swiper):function(){...}
onAutoplayStop(swiper):function(){...}
onLazyImageLoad(swiper, slide, :function(){...}
onLazyImageReady(swiper, slide,:function(){...}
onSetTransition(swiper, transit:function(){...}
onSetTranslate(swiper, translat:function(){...}
onSlideNextStart(swiper):function(){...}
onSlideNextEnd(swiper):function(){...}
onSlidePrevStart(swiper):function(){...}
onSlidePrevEnd(swiper):function(){...}
onPaginationRendered(swiper, pa:function(){...}
onScroll(swiper, e):function(){...}
Namespace (命名空间)
wrapperClass
slideClass
slideActiveClass
slideVisibleClass
bulletClass
bulletActiveClass
slideDuplicateClass
slideNextClass
slidePrevClass
paginationHiddenClass
buttonDisabledClass
slideDuplicatedActiveClass
slideDuplicatedNextClass
slideDuplicatedPrevClass
containerModifierClass
lazyLoadingClass
notificationClass
paginationClickableClass
paginationModifierClass
lazyStatusLoadingClass
lazyStatusLoadedClass
lazyPreloaderClass
preloaderClass
zoomContainerClass
paginationCurrentClass
paginationTotalClass
paginationProgressbarClass
Properties (Swiper属性)
mySwiper.activeIndex
mySwiper.realIndex
mySwiper.previousIndex
mySwiper.width
mySwiper.height
mySwiper.touches
mySwiper.params
mySwiper.container
mySwiper.wrapper
mySwiper.slides
mySwiper.bullets
mySwiper.translate
mySwiper.progress
mySwiper.isBeginning
mySwiper.isEnd
mySwiper.autoplaying
mySwiper.animating
mySwiper.clickedIndex
mySwiper.clickedSlide
mySwiper.prevButton
mySwiper.nextButton
Methods (Swiper方法)
mySwiper.disableMousewheelControl()
mySwiper.enableMousewheelControl()
mySwiper.enableKeyboardControl()
mySwiper.disableKeyboardControl()
mySwiper.slideNext(runCallbacks, speed)
mySwiper.slidePrev(runCallbacks, speed)
mySwiper.slideTo(index, speed, runCallbacks)
mySwiper.startAutoplay()
mySwiper.stopAutoplay()
mySwiper.destroy(deleteInstance, cleanupStyles)
mySwiper.getWrapperTranslate()
mySwiper.setWrapperTranslate(translate)
mySwiper.removeSlide(index)
mySwiper.removeAllSlides()
mySwiper.updateContainerSize()
mySwiper.updateSlidesSize()
mySwiper.updateProgress()
mySwiper.updatePagination()
mySwiper.updateClasses()
mySwiper.update(updateTranslate)
mySwiper.onResize()
mySwiper.detachEvents()
mySwiper.attachEvents()
mySwiper.appendSlide(slides)
mySwiper.prependSlide(slides)
mySwiper.on(callback,handler)
mySwiper.once(callback,handler)
mySwiper.off(callback)
mySwiper.lockSwipes()
mySwiper.lockSwipeToNext()
mySwiper.lockSwipeToPrev()
mySwiper.reLoop()
mySwiper.disableTouchControl()
mySwiper.enableTouchControl()
mySwiper.unsetGrabCursor()
mySwiper.setGrabCursor()

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-xdata-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处。

parallax参数

类型:
boolean
默认:
false
举例:
true
启用版本:
3.03

效果演示

使用方法示例

<div class="swiper-container">
<div style="background-image:url(/img/Parallax.jpg)" data-swiper-parallax="-23%" data-swiper-parallax-duration="3000"></div>
    <div class="swiper-wrapper">
       <div class="swiper-slide"><div data-swiper-parallax="-100">Slide 1</div></div>
       <div class="swiper-slide"><div data-swiper-parallax="-100">Slide 2</div></div>
    </div>
</div>
<script language="javascript"> 
    var mySwiper = new Swiper('.swiper-container',{
            parallax : true,
    })
</script>
[纠正] 打赏
关闭

微信扫一扫打赏我们


8.8元

给力
(268)
不给力
(42)

转载原创文章请注明:文章转载自:Swiper中文网 [http://www.swiper.com.cn]
本文地址:http://www.swiper.com.cn/api/basic/2015/0308/197.html



网友求助

    评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)