配置选项

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


loopedSlides

在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。

loopedSlides参数

类型:
number
默认:
1
举例:
8

效果演示

slider1
slider2
slider3
slider4
slider5
slider6
slider7
slider8
8

使用方法示例

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide blue-slide">
			slider1</div>
		<div class="swiper-slide red-slide">
			slider2</div>
		<div class="swiper-slide orange-slide">
			slider3</div>
		<div class="swiper-slide green-slide">
			slider4</div>
		<div class="swiper-slide pink-slide">
			slider5</div>
		<div class="swiper-slide red-slide">
			slider6</div>
		<div class="swiper-slide blue-slide">
			slider7</div>
		<div class="swiper-slide orange-slide">
			slider8</div>
	</div>
</div>
<script> 
var mySwiper = new Swiper('.swiper-container',{
loop : true,
slidesPerView : 'auto',
loopedSlides :8,
})

</script>

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