配置选项

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

Swiper初始化: new Swiper(container,options)

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 3D flow插件参数: rotate; stretch; depth; modifier; shadows

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

new Swiper(container,options)

用于初始化一个Swiper。
container : 必选，要求string类型，Swiper容器的css选择器，例如“.swiper-container”。
options : 可选，参见配置选项。
点击下载基础测试包

效果演示

slider1

slider2

slider3

使用方法示例

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">slider1</div>
    <div class="swiper-slide">slider2</div>
    <div class="swiper-slide">slider3</div>
  </div>
</div>
<script> 
var mySwiper = new Swiper('.swiper-container',{
autoplay : 5000,//可选选项，自动滑动
loop : true,//可选选项，开启循环
})
</script>

转载原创文章请注明：文章转载自：Swiper中文网 [https://2.swiper.com.cn]
本文地址：https://2.swiper.com.cn/api/start/2014/1218/140.html

下一篇：没有了