配置选项

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

Basic（Swiper基础选项）: autoplay:0; speed:300; eventTarget:wrapper; autoplayDisableOnInteraction:true; autoplayStopOnLast:false; mode:horizontal; loop:false; loopAdditionalSlides:0; slidesPerView:1; loopedSlides:1; slidesPerViewFit:true; slidesPerGroup:1; calculateHeight:false; roundLengths:false; cssWidthAndHeight:false; updateOnImagesReady:true; releaseFormElements:true; watchActiveIndex:false; visibilityFullFit:false; autoResize:true; resizeReInit:false; DOMAnimation:true; resistance:true; noSwiping:false; preventLinks:true; preventLinksPropagation:false; initialSlide:0; useCSS3Transforms:true

Free Mode （free模式/抵抗反弹）: freeMode:false; freeModeFluid:false; scrollContainer:false; momentumRatio:1; momentumBounce:true; momentumBounceRatio:1

Slides offset (slides位移选项): centeredSlides:false; offsetPxBefore:0; offsetPxAfter:0; offsetSlidesBefore:0; offsetSlidesAfter:0

Touch/mouse interactions (触发Swiper选项): touchRatio:1; simulateTouch:true; onlyExternal:false; followFinger:true; grabCursor:false; shortSwipes:true; longSwipesRatio:0.5; moveStartThreshold:false; swipeToNext:true; swipeToPrev:true

Navigation (鼠标、键盘控制选项): keyboardControl:false; mousewheelControl:false; mousewheelControlForceToAxis:false

Pagination（分页器选项）: pagination:; paginationClickable:false; paginationAsRange:true; createPagination:true

Namespace （命名空间）: wrapperClass:swiper-wrapper; slideClass:swiper-slide; slideActiveClass:swiper-slide-active; slideVisibleClass:swiper-slide-visible; slideElement:div; noSwipingClass:swiper-no-swiping; paginationElement:span; paginationElementClass:swiper-pagination-switch; paginationActiveClass:swiper-active-switch; paginationVisibleClass:swiper-visible-switch

Callbacks （回调函数）: addCallback:function(){...}; fireCallback:function(){...}; removeCallbacks:function(){...}; queueStartCallbacks:function(){...}; queueEndCallbacks:function(){...}; onFirstInit:function(){...}; onInit:function(){...}; onSwiperCreated:function(){...}; onTouchStart:function(){...}; onTouchMove:function(){...}; onTouchEnd:function(){...}; onSlideReset:function(){...}; onSlideChangeStart:function(){...}; onSlideChangeEnd:function(){...}; onSlideNext:function(){...}; onSlidePrev:function(){...}; onSlideClick:function(){...}; onSlideTouch:function(){...}; onImagesReady:function(){...}; onMomentumBounce:function(){...}; onAutoplayStop:function(){...}; onAutoplayStart:function(){...}; onResistanceBefore:function(){...}; onResistanceAfter:function(){...}; onSetWrapperTransition:function(){...}; onSetWrapperTransform:function(){...}

Function （Swiper函数）: disableMousewheelControl(); enableMousewheelControl(); enableKeyboardControl(); disableKeyboardControl(); swipeNext(); swipePrev(); swipeTo(index,speed,runCallbacks); activeSlide(); startAutoplay(); stopAutoplay(); destroy(removeResizeEvent); resizeFix(); reInit(); getWrapperTranslate(axis); setWrapperTranslate(x,y,z); wrapperTransitionEnd(); setTransform(instance,Transform); setTransition(instance,duration)

Method （Swiper方法）: browser.ie10; browser.ie8; support.touch; support.transforms; support.transforms3d; support.transitions; clickedSlideIndex; clickedSlide; activeIndex; activeLoopIndex; activeLoaderIndex; previousIndex; width; height; isTouched; positions; touches; params

增加、删除Slide: createSlide(html,slideClassList,element); slides; appendSlide(HTML,slideClassList,element); appendSlide(slideInstance); prependSlide(HTML,slideClassList,element); prependSlide(slideInstance); insertSlideAfter(index,HTML,slideClassList,element); insertSlideAfter(index,slideInstance); removeSlide(index); removeLastSlide(); removeAllSlides(); getSlide(index); getLastSlide(); getFirstSlide()

控制slide: append(); prepend(); remove(); getWidth(); getHeight(); getOffset(); insertAfter(index); clone()

设置slide: html(innerHTML); index(); isActive(); setData(name,value); getData(name); data(name,value); data(name)

Swiper Scrollbar插件参数: container; draggable; hide; snapOnRelease; dragSize; onScrollbarDrag

container

Scrollbar插件的滚动条容器。
该参数为Swiper Scrollbar插件参数，使用前需先加载插件。

slider1

slider2

slider3

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

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