配置选项

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()

spaceBetween

slide之间的距离(单位px)。

spaceBetween参数

类型:
number
默认:
0
举例:
20
启用版本:
3.0.0

效果演示

slider1
slider2
slider3
slider4
slider5
slider6
20

使用方法示例

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
slidesPerView : 3,
spaceBetween : 20,
//spaceBetween : '10%',按container的百分比
})
</script>
[纠正]

转载原创文章请注明:文章转载自:Swiper中文网 [https://3.swiper.com.cn]
本文地址:https://3.swiper.com.cn/api/Slides_grid/2015/0308/198.html