配置选项

Swiper(4-7)的配置选项

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

Basic（Swiper一般选项）: initialSlide:0; direction:horizontal; speed:300; grabCursor:false; watchSlidesProgress:false; setWrapperSize:false; virtualTranslate:false; width:; height:; roundLengths:false; breakpoints:; breakpointsBase:window; autoHeight:false; uniqueNavElements:true; nested:false; watchOverflow:false; runCallbacksOnInit:true; init:true; on:; preloadImages:true; updateOnImagesReady:true; cssMode:false; updateOnWindowResize:true; resizeObserver:true; enabled:true; createElements:false; rewind:false; maxBackfaceHiddenSlides:10; modules:

Carousel (旋转木马): slidesPerView:1; centeredSlides:false; centeredSlidesBounds:false; slidesPerGroup:1; slidesPerGroupSkip:0; slidesPerGroupAuto:false; spaceBetween:0; slidesOffsetBefore:0; slidesOffsetAfter:0; normalizeSlideIndex:true; centerInsufficientSlides:false

Loop (无限循环): loop:false; loopAdditionalSlides:0; loopedSlides:1; loopFillGroupWithBlank:false; loopPreventsSlide:true

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:false; resistance:true; resistanceRatio:0.85; edgeSwipeDetection:false; edgeSwipeThreshold:20; passiveListeners:true; touchReleaseOnEdges:false; touchEventsTarget:wrapper

Swiping / No swiping(禁止切换): noSwiping:true; noSwipingClass:swiper-no-swiping; noSwipingSelector:; allowSlideNext:true; allowSlidePrev:true; swipeHandler:null; focusableElements:input, select, option, textarea, button, video, label; preventInteractionOnTransition:false

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

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

Events （事件）: init(swiper); touchStart(swiper,event); touchMove(swiper,event); touchEnd(swiper,event); slideChangeTransitionStart(swiper); slideChangeTransitionEnd(swiper); imagesReady(swiper); transitionStart(swiper); transitionEnd(swiper); touchMoveOpposite(swiper,event); sliderMove(swiper,event); click(swiper,event); tap(swiper,event); doubleTap(swiper,event); progress(swiper,progress); reachBeginning(swiper); beforeDestroy(swiper); reachEnd(swiper); setTransition(swiper,transition); resize(swiper); setTranslate(swiper,translate); slideNextTransitionStart(swiper); slideNextTransitionEnd(swiper); slidePrevTransitionStart(swiper); slidePrevTransitionEnd(swiper); fromEdge(swiper); toEdge(swiper); slideChange(swiper); beforeLoopFix(swiper); loopFix(swiper); observerUpdate(swiper); breakpoint(swiper)

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.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, ...); mySwiper.setProgress(progress, speed); mySwiper.enable(); mySwiper.disable()

组件

Autoplay (自动切换): autoplay:false; delay:3000; stopOnLastSlide:false; disableOnInteraction:true; reverseDirection:false; waitForTransition:true; pauseOnMouseEnter:false; mySwiper.autoplay.running:; mySwiper.autoplay.start():; mySwiper.autoplay.stop():; autoplay(swiper):; autoplayPause(swiper):; autoplayResume(swiper):; autoplayStart(swiper):; autoplayStop(swiper):

Free Mode （自由模式/撞击反弹）: freeMode:false; enabled:true; momentum:true; momentumBounce:true; momentumBounceRatio:1; momentumRatio:1; minimumVelocity:0.02; momentumVelocityRatio:1; sticky:false

Grid （网格/多行多列布局）: grid:; fill:column; rows:1

Manipulation （动态操纵）: mySwiper.appendSlide(slides):; mySwiper.prependSlide(slides):; mySwiper.addSlide(index, slides:; mySwiper.removeSlide(index):; mySwiper.removeAllSlides():

Parallax (视差效果): parallax:false

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

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

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

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

Zoom (调焦): zoom:; maxRatio:3; minRatio:1; toggle:true; containerClass:swiper-zoom-container; zoomedSlideClass:swiper-slide-zoomed; 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; autoScrollOffset:0

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; hashChange:; hashSet:

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

A11y (无障碍阅读): a11y:

draggable

该参数设置为true时允许拖动滚动条。

draggable信息

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

效果演示

滚动条可拖动

slider1

slider2

slider3

使用方法示例

从Swiper7开始，容器默认类名由'.swiper-container'变更为'.swiper'。

<script type="text/javascript">
var mySwiper = new Swiper('.swiper',{
  scrollbar: {
    el: '.swiper-scrollbar',
    draggable: true,
  },
});  
</script>

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

上一篇：hide 下一篇：snapOnRelease