配置選項

Swiper5/Swiper4的配置選項

Swiper初始化
new Swiper(swiperContainer, parameters)
Basic(Swiper一般選項)
initialSlide:0
direction:horizontal
speed:300
grabCursor:false
parallax:false
setWrapperSize:false
virtualTranslate:false
a11y:
width:
height:
roundLengths:false
breakpoints:
autoHeight:false
uniqueNavElements:true
nested:false
watchOverflow:false
runCallbacksOnInit:true
init:true
on:
preloadImages:true
updateOnImagesReady:true
cssMode:false
updateOnWindowResize:true
Slides grid (網格分布)
centeredSlides:false
centeredSlidesBounds:false
slidesPerView:1
slidesPerGroup:1
spaceBetween:0
slidesPerColumn:1
slidesPerColumnFill:column
slidesOffsetBefore:0
slidesOffsetAfter:0
normalizeSlideIndex:true
centerInsufficientSlides:false
Free Mode (free模式/抵抗反彈)
freeMode:false
freeModeMomentum:true
freeModeMomentumRatio:1
freeModeMomentumVelocityRatio:1
freeModeMomentumBounce:true
freeModeMomentumBounceRatio:1
freeModeSticky:false
freeModeMinimumVelocity:0.02
Loop (環路)
loop:false
loopAdditionalSlides:0
loopedSlides:1
loopFillGroupWithBlank:false
Progress(進度)
watchSlidesProgress:false
watchSlidesVisibility:false
Clicks (點擊)
preventClicks:true
preventClicksPropagation:true
slideToClickedSlide:false
Touches(觸發條件)
touchRatio:1
simulateTouch:true
allowTouchMove:true
followFinger:true
shortSwipes:true
longSwipes:true
longSwipesMs:300
longSwipesRatio:0.5
threshold:false
touchAngle:45
touchStartPreventDefault:true
touchStartForcePreventDefault:false
touchMoveStopPropagation:Swiper5默認false/Swiper4默認true
resistance:true
resistanceRatio:0.85
iOSEdgeSwipeDetection:false
iOSEdgeSwipeThreshold:20
passiveListeners:true
touchReleaseOnEdges:false
touchEventsTarget:container
Swiping / No swiping(禁止切換)
preventInteractionOnTransition:false
noSwiping:true
noSwipingSelector:
noSwipingClass:swiper-no-swiping
allowSlideNext:true
allowSlidePrev:true
swipeHandler:null
Observer (監視器)
observer:false
observeParents:false
observeSlideChildren:false
Namespace (命名空間)
wrapperClass
slideClass
slideActiveClass
slideVisibleClass
slideDuplicateClass
slideNextClass
slidePrevClass
slideDuplicatedActiveClass
slideDuplicatedNextClass
slideDuplicatedPrevClass
containerModifierClass
Events (事件)
init
touchStart(event)
touchMove(event)
touchEnd(event)
slideChangeTransitionStart
slideChangeTransitionEnd
imagesReady
transitionStart
transitionEnd
touchMoveOpposite(event)
sliderMove(event)
click(event)
tap(event)
doubleTap(event)
progress(progress)
reachBeginning()
reachEnd()
beforeDestroy()
setTransition(transition)
resize()
setTranslate(translate)
slideNextTransitionStart
slideNextTransitionEnd
slidePrevTransitionStart
slidePrevTransitionEnd
fromEdge
slideChange
autoplayStart
autoplayStop
autoplay
beforeLoopFix
loopFix
Properties (Swiper屬性)
mySwiper.activeIndex
mySwiper.realIndex
mySwiper.previousIndex
mySwiper.width
mySwiper.height
mySwiper.touches
mySwiper.params
mySwiper.$el
mySwiper.$wrapperEl
mySwiper.slides
mySwiper.translate
mySwiper.progress
mySwiper.isBeginning
mySwiper.isEnd
mySwiper.animating
mySwiper.clickedIndex
mySwiper.clickedSlide
mySwiper.allowSlideNext
mySwiper.allowSlidePrev
mySwiper.allowTouchMove
Methods (Swiper方法)
mySwiper.slideNext(speed, runCallbacks)
mySwiper.slidePrev(speed,runCallbacks)
mySwiper.slideTo(index, speed, runCallbacks)
mySwiper.slideToLoop(index, speed, runCallbacks)
mySwiper.destroy(deleteInstance, cleanupStyles)
mySwiper.getTranslate()
mySwiper.setTranslate(translate)
mySwiper.updateSize()
mySwiper.updateSlides()
mySwiper.updateProgress()
mySwiper.updateSlidesClasses()
mySwiper.update(updateTranslate)
mySwiper.detachEvents()
mySwiper.attachEvents()
mySwiper.appendSlide(slides)
mySwiper.prependSlide(slides)
mySwiper.addSlide(index, slides);
mySwiper.removeSlide(index)
mySwiper.removeAllSlides()
mySwiper.on(event,handler)
mySwiper.once(event,handler)
mySwiper.off(event)
mySwiper.off(event, handler)
mySwiper.setGrabCursor()
mySwiper.unsetGrabCursor()
mySwiper.updateAutoHeight(speed)
mySwiper.slideToClosest(speed, runCallbacks)
mySwiper.changeDirection(direction)
mySwiper.translateTo(translate, speed, ...)
組件
Autoplay (自動切換)
autoplay:false
delay:3000
stopOnLastSlide:false
disableOnInteraction:true
reverseDirection:false
waitForTransition:true
mySwiper.autoplay.running:
mySwiper.autoplay.start():
mySwiper.autoplay.stop():
Effects (切換效果)
effect:slide
fadeEffect:
cubeEffect:
coverflowEffect:
flipEffect:
Pagination(分頁器)
pagination:
el:null
type:bullets
progressbarOpposite:false
bulletElement:span
dynamicBullets:false
dynamicMainBullets:1
hideOnClick:false
clickable:false
renderBullet(index, className):null
renderFraction():null
renderProgressbar():null
renderCustom():null
formatFractionCurrent:
formatFractionTotal:
bulletClass:swiper-pagination-bullet
bulletActiveClass:swiper-pagination-bullet-active
modifierClass:swiper-pagination-
currentClass:swiper-pagination-current
totalClass:swiper-pagination-total
hiddenClass:swiper-pagination-hidden
progressbarFillClass:swiper-pagination-progressbar-fill
clickableClass:swiper-pagination-clickable
mySwiper.pagination.el:
mySwiper.pagination.bullets:
mySwiper.pagination.render():
mySwiper.pagination.update():
paginationHide:
paginationShow:
paginationRender(swiper, pagina:
paginationUpdate(swiper, pagina:
Navigation Buttons(前進后退按鈕)
navigation:
nextEl:null
prevEl:null
hideOnClick:false
disabledClass:swiper-button-disabled
hiddenClass:swiper-button-hidden
mySwiper.navigation.nextEl:
mySwiper.navigation.prevEl:
mySwiper.navigation.update():
navigationHide:
navigationShow:
Scollbar(滾動條)
scrollbar:
el:null
hide:true
draggable:false
snapOnRelease:true
dragSize:
mySwiper.scrollbar.el:
mySwiper.scrollbar.dragEl:
mySwiper.scrollbar.updateSize():
Keyboard(鍵盤)
keyboard:false
enabled:false
onlyInViewport:true
mySwiper.keyboard.enabled:
mySwiper.keyboard.enable():
mySwiper.keyboard.disable():
keyPress():
Mousewheel (鼠標)
mousewheel:false
forceToAxis:false
releaseOnEdges:false
invert:false
sensitivity:1
eventsTarged:container
mySwiper.mousewheel.enabled:
mySwiper.mousewheel.enable():
mySwiper.mousewheel.disable():
Lazy Loading(延遲加載)
lazy:false
loadPrevNext:false
loadPrevNextAmount:1
loadOnTransitionStart:false
elementClass:swiper-lazy
loadingClass:swiper-lazy-loading
loadedClass:swiper-lazy-loaded
preloaderClass:swiper-lazy-preloader
mySwiper.lazy.load():
mySwiper.lazy.loadInSlide(index:
lazyImageLoad(slideEl, imageEl):
lazyImageReady(slideEl, imageEl:
Zoom (調焦)
zoom:
maxRatio:3
minRatio:1
toggle:true
containerClass:swiper-zoom-container
mySwiper.zoom.enabled:
mySwiper.zoom.scale:
mySwiper.zoom.enable():
mySwiper.zoom.disable():
mySwiper.zoom.toggle():
mySwiper.zoom.in():
mySwiper.zoom.out():
zoomChange:
Controller (雙向控制)
controller:
control:null
inverse:false
By:slide
Thumbs (縮略圖)
thumbs:
swiper:
slideThumbActiveClass:swiper-slide-thumb-active
thumbsContainerClass:swiper-container-thumbs
mySwiper.thumbs.swiper:
multipleActiveThumbs:true
Virtual Slides (虛擬slide)
virtual:
slides:[]
cache:true
renderSlide:null
renderExternal:null
addSlidesBefore:0
addSlidesAfter:0
mySwiper.virtual.cache:
mySwiper.virtual.from:
mySwiper.virtual.to:
mySwiper.virtual.slides:
mySwiper.virtual.appendSlide(sl:
mySwiper.virtual.prependSlide(s:
mySwiper.virtual.update():
mySwiper.virtual.removeSlide(sl:
mySwiper.virtual.removeAllSlide:
Hash Navigation (錨導航)
hashNavigation:false
watchState:false
replaceState:false
History Navigation (歷史導航)
history:
replaceState:false
key:slides

touchEnd(event)

回調函數,觸摸釋放時執行,接受 touchend事件作為參數。(釋放即執行

touchEnd(event)信息

啟用版本:
4.0.0

效果演示

此實例通過判斷wrapper位移,在最后一頁繼續拖動并釋放時跳轉

slider1
slider2
再往后拖就跳了

使用方法示例

<script> 
var mySwiper = new Swiper('.swiper-container',{
  on: {
    touchEnd: function(event){
      //你的事件
    },
  },
})

</script>
[糾正]
給力
(106)
不給力
(159)

轉載原創文章請注明:文章轉載自:Swiper中文網 [https://www.swiper.com.cn]
本文地址:https://www.swiper.com.cn/api/event/89.html



網友求助

    象棋布局名称 甘肃快3常规走势图 10百家乐游戏下载 浙江6+1中奖规则及将金 十大不起眼的赚钱行业 山东十一运夺金玩法 北京时时彩哪个平台好 11选5走势图图表精灵 股票大盘涨跌判断方法 陕西快乐十分开奖查询 飞鱼彩票走势图规律