配置选项

Swiper5/Swiper4的配置选项

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:; autoHeight:false; uniqueNavElements:true; nested:false; watchOverflow:false; runCallbacksOnInit:true; init:true; on:; preloadImages:true; updateOnImagesReady:true; cssMode:false; updateOnWindowResize:true

Slides grid (网格分布): centeredSlides:false; centeredSlidesBounds:false; slidesPerView:1; slidesPerGroup:1; slidesPerGroupSkip:0; 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; touchStartPreventDefault:true; touchStartForcePreventDefault:false; touchMoveStopPropagation:Swiper5默认false/Swiper4默认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; observeSlideChildren:false

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

Events （事件）: 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; beforeLoopFix; loopFix

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); mySwiper.changeDirection(direction); mySwiper.translateTo(translate, speed, ...)

组件

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

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

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

cssMode

启用后，它将使用现代CSS Scroll Snap API。
它不支持Swiper的很多功能，但可能会带来更好的性能。

以下是不支持的功能列表：

所有切换效果 (Fade, Coverflow, Flip, Cube)
Zoom
虚拟 Slides
speed 属性
所有transition start/end 相关的事件 (可使用slideChange 代替)
slidesPerGroup 部分支持
centeredSlides
如果浏览器不支持scrollTo.behavior ='smooth'，滑动和切换时将没有过渡效果
simulateTouch 无效，鼠标无法拖动
resistance
allowSlidePrev/Next
swipeHandler
freeMode 和所有相关属性无效

cssMode信息

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

效果演示

slider1

slider2

slider3

使用方法示例

<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
  cssMode:true,
})
</script>

转载原创文章请注明：文章转载自：Swiper中文网 [https://www.swiper.com.cn]
本文地址：https://www.swiper.com.cn/api/parameters/449.html

上一篇：watchOverflow 下一篇：updateOnWindowResize

网友求助