配置选项

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(){...}
onDestroy(swiper):function(){...}
onReachEnd(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(){...}
onKeyPress:function(){...}
onBeforeResize(swiper):function(){...}
onAfterResize(swiper):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.setGrabCursor()
mySwiper.unsetGrabCursor()

Swiper基本结构

名词解释

名词 描述
Swiper 整个滑动对象,有时特指滑块释放后仍然正向移动直到贴合边缘的过程(过渡)
container Swiper的容器,里面包括滑动块(slides)的封套(wrapper)、分页器(pagination)、前进按钮等
wrapper 触控的对象,可触摸区域,移动的块的集合,过渡时会随slide切换产生位移
slider 切换的滑块,可以包含文字、图片、html元素或另外一个Swiper
pagination 分页器,指示slide的数量和当前活动的slide
active slide 活动滑块,即当前看到的(visible)slide,当可视slide不止一个时,默认最左边那个是活动滑块
callback 回调函数,在某些情况下触发