配置选项

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

nextButton

前进按钮的css选择器或HTML元素。

nextButton参数

类型：: string / HTMLElement
默认：: null
举例：: .swiper-button-next
启用版本：: 3.0.0

效果演示

Slide 1

Slide 2

Slide 3

修改箭头的颜色：除了默认的蓝色箭头外，Swiper还内置了白色 > 和黑色 > 两种箭头颜色，如需其他颜色可更改css样式中的fill%3D'%23007aff'详见下方代码示例。后退按钮同效。

一些PNG箭头素材，可右键下载

使用方法示例

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
})
</script>

<!-- 修改箭头颜色示范 -->
<div class="swiper-button-next swiper-button-white"></div> <!-- 白色 -->
<div class="swiper-button-next swiper-button-black"></div> <!-- 黑色 -->
<style>
/*Swiper原样式 */
.swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");}
/*改变了颜色和加粗的样式*/
.swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");}

</style>

转载原创文章请注明：文章转载自：Swiper中文网 [https://3.swiper.com.cn]
本文地址：https://3.swiper.com.cn/api/Navigation_Buttons/2015/0308/209.html

下一篇：prevButton