配置选项

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

watchSlidesVisibility

开启watchSlidesVisibility选项前需要先开启watchSlidesProgress，如果开启了watchSlidesVisibility，则会在每个可见slide增加一个classname，默认为'swiper-slide-visible'。

watchSlidesVisibility参数

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

效果演示

第1,2,3个slide是visible，第一个是active。

slider1

slider2

slider3

slider4

slider5

slider6

slider7

slider8

利用watchSlidesVisibility和clickedIndex制作宽度超出后自动适应的导航

版块1

版块2

版块3

版块4

版块5

版块6

版块7

版块8

slider1

slider2

slider3

slider4

slider5

slider6

slider7

slider8

使用方法示例

<script> 
var mySwiper = new Swiper('.swiper-container',{
watchSlidesProgress : true,
watchSlidesVisibility : true,
})
</script>

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

上一篇：watchSlidesProgress

下一篇：没有了