配置选项

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

coverflow

cover flow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式。coverflow效果参数,可选值:

rotate:slide做3d旋转时Y轴的旋转角度。默认50。
stretch:每个slide之间的拉伸值,越大slide靠得越紧。 默认0。
depth:slide的位置深度。值越大z轴距离越远,看起来越小。 默认100。
modifier:depth和rotate和stretch的倍率,相当于depth*modifier、rotate*modifier、stretch*modifier,值越大这三个参数的效果越明显。默认1。
slideShadows:开启slide阴影。默认 true。

coverflow参数

启用版本:
3.0.0

效果演示

slider1
slider2
slider3
slider4
slider5
slider6
slider7
slider8
slider9


coverflow的应用,带城市展示的日历切换 [下载]

使用方法示例

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
effect : 'coverflow',
slidesPerView: 3,
centeredSlides: true,
coverflow: {
            rotate: 30,
            stretch: 10,
            depth: 60,
            modifier: 2,
            slideShadows : true
        }
})
</script>
[纠正]

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