配置选项

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 : 可选,参见配置选项
点击下载基础测试包

new 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