配置选项

Swiper4.x的全部配置选项、方法、函数

Swiper初始化: new Swiper(swiperContainer, parameters)

Basic（Swiper一般选项）: initialSlide:0; direction:horizontal; speed:300; grabCursor:false; parallax:false; setWrapperSize:false; virtualTranslate:false; a11y:; width:; height:; roundLengths:false; breakpoints:; breakpointsInverse:false; autoHeight:false; uniqueNavElements:true; nested:false; runCallbacksOnInit:true; watchOverflow:false; on:; init:true; preloadImages:true; updateOnImagesReady:true

Slides grid (网格分布): centeredSlides:false; slidesPerView:1; slidesPerGroup:1; spaceBetween:0; slidesPerColumn:1; slidesPerColumnFill:column; slidesOffsetBefore:0; slidesOffsetAfter:0; normalizeSlideIndex:true; centerInsufficientSlides:false

Free Mode （free模式/抵抗反弹）: freeMode:false; freeModeMomentum:true; freeModeMomentumRatio:1; freeModeMomentumVelocityRatio:1; freeModeMomentumBounce:true; freeModeMomentumBounceRatio:1; freeModeSticky:false; freeModeMinimumVelocity:0.02

Loop (环路): loop:false; loopAdditionalSlides:0; loopedSlides:1; loopFillGroupWithBlank:false

Progress（进度）: watchSlidesProgress:false; watchSlidesVisibility:false

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; touchMoveStopPropagation:true; resistance:true; resistanceRatio:0.85; iOSEdgeSwipeDetection:false; iOSEdgeSwipeThreshold:20; passiveListeners:true; touchReleaseOnEdges:false; touchEventsTarget:container

Swiping / No swiping(禁止切换): preventInteractionOnTransition:false; noSwiping:true; noSwipingSelector:; noSwipingClass:swiper-no-swiping; allowSlideNext:true; allowSlidePrev:true; swipeHandler:null

Observer （监视器）: observer:false; observeParents:false

Namespace （命名空间）: wrapperClass; slideClass; slideActiveClass; slideVisibleClass; slideDuplicateClass; slideNextClass; slidePrevClass; slideDuplicatedActiveClass; slideDuplicatedNextClass; slideDuplicatedPrevClass; containerModifierClass

Callbacks （回调函数）: init; touchStart(event); touchMove(event); touchEnd(event); slideChangeTransitionStart; slideChangeTransitionEnd; imagesReady; transitionStart; transitionEnd; touchMoveOpposite(event); sliderMove(event); click(event); tap(event); doubleTap(event); progress(progress); reachBeginning(); reachEnd(); beforeDestroy(); setTransition(transition); resize(); setTranslate(translate); slideNextTransitionStart; slideNextTransitionEnd; slidePrevTransitionStart; slidePrevTransitionEnd; fromEdge; slideChange; autoplayStart; autoplayStop; autoplay

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.appendSlide(slides); mySwiper.prependSlide(slides); mySwiper.addSlide(index, slides);; mySwiper.removeSlide(index); mySwiper.removeAllSlides(); 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);

组件

Autoplay (自动切换): autoplay:false; delay:3000; stopOnLastSlide:false; disableOnInteraction:true; reverseDirection:false; waitForTransition:true; mySwiper.autoplay.running:; mySwiper.autoplay.start():; mySwiper.autoplay.stop():

Effects (切换效果): effect:slide; fadeEffect:; cubeEffect:; coverflowEffect:; flipEffect:

Pagination（分页器）: pagination:; el:null; type:bullets; bulletElement:span; progressbarOpposite:false; dynamicMainBullets:1; dynamicBullets:false; 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; clickableClass:swiper-pagination-clickable; mySwiper.pagination.el:; mySwiper.pagination.bullets:; mySwiper.pagination.render():; mySwiper.pagination.update():

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

Scollbar（滚动条）: scrollbar:; el:null; hide:true; 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():

Mousewheel (鼠标): mousewheel:false; forceToAxis:false; releaseOnEdges:false; invert:false; sensitivity:1; eventsTarged:container; mySwiper.mousewheel.enabled:; mySwiper.mousewheel.enable():; mySwiper.mousewheel.disable():

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(slideEl, imageEl):; lazyImageReady(slideEl, imageEl:

Zoom (调焦): zoom:; maxRatio:3; minRatio:1; toggle:true; containerClass:swiper-zoom-container; mySwiper.zoom.enabled:; mySwiper.zoom.scale:; mySwiper.zoom.enable():; mySwiper.zoom.disable():; mySwiper.zoom.toggle():; mySwiper.zoom.in():; mySwiper.zoom.out():

Controller (双向控制): controller:; control:null; inverse:false; By:slide

Thumbs (缩略图): thumbs:; swiper:; slideThumbActiveClass:swiper-slide-thumb-active; thumbsContainerClass:swiper-container-thumbs; mySwiper.thumbs.swiper:

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

Hash Navigation (锚导航): hashNavigation:false; watchState:false; replaceState:false

History Navigation (历史导航): history:; replaceState:false; key:slides

spaceBetween

在slide之间设置距离（单位px）。

spaceBetween参数

类型：: number
默认：: 0
举例：: 20
启用版本：: 4.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://www.swiper.com.cn]
本文地址：https://www.swiper.com.cn/api/grid/198.html

上一篇：centeredSlides 下一篇：slidesPerColumn

网友求助