配置选项

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


scrollContainer

设置为真时,把整个Swiper作为可滚动区域,在制作滚动条时使用,借助 idangerous.swiper.scrollbar.css 和 idangerous.swiper.scrollbar-2.1.js

scrollContainer参数

类型:
boolean
默认:
false
举例:
true

效果演示

使用方法示例

<link href="/demo/css/idangerous.swiper.scrollbar.css" rel="stylesheet" />
<script src="/demo/js/idangerous.swiper.scrollbar-2.1.js"></script>
<script language="javascript"> 
var mySwiper = new Swiper('.swiper-container',{
    scrollContainer: true,
    scrollbar: {
      container: '.swiper-scrollbar'
    }
  })
</script>
给力
(43)
不给力
(7)

转载原创文章请注明:文章转载自:Swiper中文网 [http://2.swiper.com.cn]
本文地址:http://2.swiper.com.cn/api/freemode/2014/1217/46.html