配置选项

Swiper(4-7)的配置选项

Swiper初始化
new Swiper(swiperContainer, parameters)
Basic(Swiper一般选项)
initialSlide:0
direction:horizontal
speed:300
grabCursor:false
watchSlidesProgress:false
setWrapperSize:false
virtualTranslate:false
width:
height:
roundLengths:false
breakpoints:
breakpointsBase:window
autoHeight:false
uniqueNavElements:true
nested:false
watchOverflow:false
runCallbacksOnInit:true
on:
init:true
preloadImages:true
updateOnImagesReady:true
cssMode:false
updateOnWindowResize:true
enabled:true
createElements:false
rewind:false
maxBackfaceHiddenSlides:10
modules:
Carousel (旋转木马)
slidesPerView:1
centeredSlides:false
centeredSlidesBounds:false
slidesPerGroup:1
slidesPerGroupSkip:0
slidesPerGroupAuto:false
spaceBetween:0
slidesOffsetBefore:0
slidesOffsetAfter:0
normalizeSlideIndex:true
centerInsufficientSlides:false
Loop (无限循环)
loop:false
loopAdditionalSlides:0
loopedSlides:1
loopFillGroupWithBlank:false
loopPreventsSlide:true
Clicks (点击)
preventClicks:true
preventClicksPropagation:true
slideToClickedSlide:false
Touches(触发条件)
touchRatio:1
simulateTouch:true
allowTouchMove:true
followFinger:true
shortSwipes:true
longSwipes:true
longSwipesMs:300
longSwipesRatio:0.5
threshold:false
touchAngle:45
touchStartPreventDefault:true
touchStartForcePreventDefault:false
touchMoveStopPropagation:false
resistance:true
resistanceRatio:0.85
edgeSwipeDetection:false
edgeSwipeThreshold:20
passiveListeners:true
touchReleaseOnEdges:false
touchEventsTarget:wrapper
Swiping / No swiping(禁止切换)
noSwiping:true
noSwipingClass:swiper-no-swiping
noSwipingSelector:
allowSlideNext:true
allowSlidePrev:true
swipeHandler:null
focusableElements:input, select, option, textarea, button, video, label
preventInteractionOnTransition:false
Observer (监视器)
observer:false
observeParents:false
observeSlideChildren:false
resizeObserver:true
Namespace (命名空间)
wrapperClass
slideClass
slideActiveClass
slideVisibleClass
slideDuplicateClass
slideNextClass
slidePrevClass
slideDuplicatedActiveClass
slideDuplicatedNextClass
slideDuplicatedPrevClass
containerModifierClass
Events (事件)
init(swiper)
touchStart(swiper,event)
touchMove(swiper,event)
touchEnd(swiper,event)
slideChangeTransitionStart(swiper)
slideChangeTransitionEnd(swiper)
imagesReady(swiper)
transitionStart(swiper)
transitionEnd(swiper)
touchMoveOpposite(swiper,event)
sliderMove(swiper,event)
click(swiper,event)
tap(swiper,event)
doubleTap(swiper,event)
progress(swiper,progress)
reachBeginning(swiper)
beforeDestroy(swiper)
reachEnd(swiper)
setTransition(swiper,transition)
resize(swiper)
setTranslate(swiper,translate)
slideNextTransitionStart(swiper)
slideNextTransitionEnd(swiper)
slidePrevTransitionStart(swiper)
slidePrevTransitionEnd(swiper)
fromEdge(swiper)
toEdge(swiper)
slideChange(swiper)
beforeLoopFix(swiper)
loopFix(swiper)
observerUpdate(swiper)
breakpoint(swiper)
Properties (Swiper属性)
mySwiper.activeIndex
mySwiper.realIndex
mySwiper.previousIndex
mySwiper.width
mySwiper.height
mySwiper.touches
mySwiper.params
mySwiper.$el
mySwiper.$wrapperEl
mySwiper.slides
mySwiper.translate
mySwiper.progress
mySwiper.isBeginning
mySwiper.isEnd
mySwiper.animating
mySwiper.clickedIndex
mySwiper.clickedSlide
mySwiper.allowSlideNext
mySwiper.allowSlidePrev
mySwiper.allowTouchMove
Methods (Swiper方法)
mySwiper.slideNext(speed, runCallbacks)
mySwiper.slidePrev(speed,runCallbacks)
mySwiper.slideTo(index, speed, runCallbacks)
mySwiper.slideToLoop(index, speed, runCallbacks)
mySwiper.destroy(deleteInstance, cleanupStyles)
mySwiper.getTranslate()
mySwiper.setTranslate(translate)
mySwiper.updateSize()
mySwiper.updateSlides()
mySwiper.updateProgress()
mySwiper.updateSlidesClasses()
mySwiper.update(updateTranslate)
mySwiper.detachEvents()
mySwiper.attachEvents()
mySwiper.on(event,handler)
mySwiper.once(event,handler)
mySwiper.off(event)
mySwiper.off(event, handler)
mySwiper.setGrabCursor()
mySwiper.unsetGrabCursor()
mySwiper.updateAutoHeight(speed)
mySwiper.slideToClosest(speed, runCallbacks)
mySwiper.changeDirection(direction)
mySwiper.translateTo(translate, speed, ...)
mySwiper.setProgress(progress, speed)
mySwiper.enable()
mySwiper.disable()
组件
Autoplay (自动切换)
autoplay:false
delay:3000
stopOnLastSlide:false
disableOnInteraction:true
reverseDirection:false
waitForTransition:true
pauseOnMouseEnter:false
mySwiper.autoplay.running:
mySwiper.autoplay.start():
mySwiper.autoplay.stop():
autoplay(swiper):
autoplayPause(swiper):
autoplayResume(swiper):
autoplayStart(swiper):
autoplayStop(swiper):
Free Mode (自由模式/撞击反弹)
freeMode:false
enabled:true
momentum:true
momentumBounce:true
momentumBounceRatio:1
momentumRatio:1
minimumVelocity:0.02
momentumVelocityRatio:1
sticky:false
Grid (网格/多行多列布局)
grid:
fill:column
rows:1
Manipulation (动态操纵)
mySwiper.appendSlide(slides):
mySwiper.prependSlide(slides):
mySwiper.addSlide(index, slides:
mySwiper.removeSlide(index):
mySwiper.removeAllSlides():
Parallax (视差效果)
parallax:false
Effects (切换效果)
effect:slide
fadeEffect:
cubeEffect:
coverflowEffect:
flipEffect:
cardsEffect:
creativeEffect:
Pagination(分页器)
pagination:
el:null
type:bullets
progressbarOpposite:false
bulletElement:span
dynamicBullets:false
dynamicMainBullets:1
hideOnClick:false
clickable:false
renderBullet(index, className):null
renderFraction():null
renderProgressbar():null
renderCustom():null
formatFractionCurrent:
formatFractionTotal:
bulletClass:swiper-pagination-bullet
bulletActiveClass:swiper-pagination-bullet-active
modifierClass:swiper-pagination-
currentClass:swiper-pagination-current
totalClass:swiper-pagination-total
hiddenClass:swiper-pagination-hidden
progressbarFillClass:swiper-pagination-progressbar-fill
clickableClass:swiper-pagination-clickable
mySwiper.pagination.el:
mySwiper.pagination.bullets:
mySwiper.pagination.render():
mySwiper.pagination.update():
paginationHide:
paginationShow:
paginationRender(swiper, pagina:
paginationUpdate(swiper, pagina:
Navigation Buttons(前进后退按钮)
navigation:
nextEl:null
prevEl:null
hideOnClick:false
disabledClass:swiper-button-disabled
hiddenClass:swiper-button-hidden
mySwiper.navigation.nextEl:
mySwiper.navigation.prevEl:
mySwiper.navigation.update():
navigationHide:
navigationShow:
Scollbar(滚动条)
scrollbar:
el:null
hide:false
draggable:false
snapOnRelease:true
dragSize:
mySwiper.scrollbar.el:
mySwiper.scrollbar.dragEl:
mySwiper.scrollbar.updateSize():
Keyboard(键盘)
keyboard:false
enabled:false
onlyInViewport:true
mySwiper.keyboard.enabled:
mySwiper.keyboard.enable():
mySwiper.keyboard.disable():
keyPress():
pageUpDown:true
Mousewheel (鼠标)
mousewheel:false
forceToAxis:false
releaseOnEdges:false
invert:false
sensitivity:1
eventsTarged:container
mySwiper.mousewheel.enabled:
mySwiper.mousewheel.enable():
mySwiper.mousewheel.disable():
thresholdDelta:null
thresholdTime:null
Lazy Loading(延迟加载)
lazy:false
loadPrevNext:false
loadPrevNextAmount:1
loadOnTransitionStart:false
elementClass:swiper-lazy
loadingClass:swiper-lazy-loading
loadedClass:swiper-lazy-loaded
preloaderClass:swiper-lazy-preloader
mySwiper.lazy.load():
mySwiper.lazy.loadInSlide(index:
lazyImageLoad(swiper, slideEl, :
lazyImageReady(swiper, slideEl,:
Zoom (调焦)
zoom:
maxRatio:3
minRatio:1
toggle:true
containerClass:swiper-zoom-container
zoomedSlideClass:swiper-slide-zoomed
mySwiper.zoom.enabled:
mySwiper.zoom.scale:
mySwiper.zoom.enable():
mySwiper.zoom.disable():
mySwiper.zoom.toggle():
mySwiper.zoom.in():
mySwiper.zoom.out():
zoomChange:
Controller (双向控制)
controller:
control:null
inverse:false
By:slide
Thumbs (缩略图)
thumbs:
swiper:
slideThumbActiveClass:swiper-slide-thumb-active
thumbsContainerClass:swiper-container-thumbs
mySwiper.thumbs.swiper:
multipleActiveThumbs:true
autoScrollOffset:0
Virtual Slides (虚拟slide)
virtual:
slides:[]
cache:true
renderSlide:null
renderExternal:null
addSlidesBefore:0
addSlidesAfter:0
mySwiper.virtual.cache:
mySwiper.virtual.from:
mySwiper.virtual.to:
mySwiper.virtual.slides:
mySwiper.virtual.appendSlide(sl:
mySwiper.virtual.prependSlide(s:
mySwiper.virtual.update():
mySwiper.virtual.removeSlide(sl:
mySwiper.virtual.removeAllSlide:
Hash Navigation (锚导航)
hashNavigation:false
watchState:false
replaceState:false
hashChange:
hashSet:
History Navigation (历史导航)
history:
replaceState:false
key:slides
root:
A11y (无障碍阅读)
a11y:

Swiper 的结构和基础原理

Swiper 的每个展示块(屏)为一个slide,slide中放置图片或文字等展示的内容,全部slide排成一行(或多行)包含在包装器wrapper中,而总容器container 又包裹着wrapper和箭头按钮控件navigation以及分页器控件pagination。

当手指(或鼠标)触摸滑动Swiper时,Swiper在浏览器每一帧通过计算滑动的距离差对wrapper进行位移(transform)从而产生拖动的效果。在手指(或鼠标)释放时,计算下一个slide的起始位置对wrapper设置位移动画(transition),从而产生切换动画效果。

Swiper7的API变化

Swiper容器的默认类名变更为'.swiper',之前是'.swiper-container'。新增两个3D过渡效果,自由模式和网格组件化。

Swiper5的API变化

Swiper5 增加了CSS模式(cssMode),并且可以通过CSS文件修改Swiper颜色风格。

Swiper4的API变化

Swiper4 将组件的相关选项整合起来了,并且修改了回调函数获取swiper 实例的方式为this关键词。


组件列表

模块功能版本
Navigation按钮 
Pagination分页器 
Scrollbar滚动条 
Autoplay自动切换 
FreeMode自由模式7.0.0
Grid网格分布7.0.0
Manipulation动态操纵7.0.0
Parallax视差效果 
Lazy延迟加载图片 
EffectFade渐变过渡 
EffectCoverflow行进翻转过渡 
EffectFlip翻转过渡 
EffectCube方块过渡 
EffectCards卡片过渡7.0.0
EffectCreative创意性过渡7.0.0
Thumbs缩略图4.4.1
Zoom缩放 
Keyboard键盘 
Mousewheel鼠标 
Virtual虚拟块 
HashNavigation锚导航 
History历史导航 
Controller双向控制 
A11y障碍使用辅助 
Navigation, Pagination, Scrollbar, Autoplay, FreeMode, Grid, Manipulation, Parallax, Lazy, EffectFade, EffectCoverflow, EffectFlip, EffectCube, EffectCards, EffectCreative, Thumbs, Zoom, Keyboard, Mousewheel, Virtual, HashNavigation, History, Controller, A11y