配置選項

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

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; 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

slideToClickedSlide

設置為true則點擊slide會過渡到這個slide。

slideToClickedSlide信息

類型：: boolean
默認：: false
舉例：: true
啟用版本：: 4.0.0

效果演示

這個例子中點擊的slide會居中

slider1

slider2

slider3

slider4

slider5

slider6

使用方法示例

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

轉載原創文章請注明：文章轉載自：Swiper中文網 [http://www.aichat.com.cn]
本文地址：http://www.aichat.com.cn/api/clicks/207.html

上一篇：preventClicksPropagation

下一篇：沒有了

網友求助

2020买马高清生肖表图刘伯温精品高手料大全