配置选项

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


autoplay

自动切换的时间间隔(单位ms),不设定该参数slide不会自动切换。
用户操作后autoplay停止,参考基本选项 autoplayDisableOnInteraction

autoplay参数

类型:
number
默认:
0
举例:
5000

效果演示

slider1
slider2
slider3
5000


slider1
slider2
slider3
1000


slider1
slider2
slider3
利用swipePrev()实现反方向自动切换

使用方法示例

<script>
var mySwiper = new Swiper('.swiper-container',{
autoplay : 5000,
}


//反方向自动切换简单示例
var mySwiper = new Swiper('.swiper-container',{
loop : true,
})
setInterval("mySwiper.swipePrev()", 2000);
</script>

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