配置选项

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

new Swiper(swiperContainer, parameters)

用于初始化一个Swiper，返回初始化后的Swiper实例。
swiperContainer : 必选，HTML元素或者string类型，Swiper容器的css选择器，例如“.swiper-container”。
parameters : 可选，参见配置选项。

new Swiper(swiperContainer, parameters)参数

启用版本：: 3.0.0

效果演示

效果中用css给slide设置了高度和背景色。

slider1

slider2

slider3

一个页面中引用多个Swiper可以给每个Swiper加上ID或Class区分，要保留默认的类名swiper-container
HTML
<div class="swiper-container" id="swiper1">....
<div class="swiper-container" id="swiper2">....
<div class="swiper-container" id="swiper3">....
JS

var swiper1 = new Swiper('#swiper1');
var swiper2 = new Swiper('#swiper2');

var swiper3 = new Swiper('#swiper3');

使用方法示例

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>
<script> 
var mySwiper = new Swiper('.swiper-container', {
	autoplay: 5000,//可选选项，自动滑动
})
</script>

转载原创文章请注明：文章转载自：Swiper中文网 [https://3.swiper.com.cn]
本文地址：https://3.swiper.com.cn/api/start/2014/1218/140.html

下一篇：没有了