配置选项

Swiper(4-7)的配置选项

Swiper初始化
new Swiper(swiperContainer, parameters)
Basic(Swiper一般选项)
initialSlide:0
direction:horizontal
speed:300
grabCursor:false
watchSlidesProgress:false
setWrapperSize:false
virtualTranslate:false
width:
height:
roundLengths:false
breakpoints:
breakpointsBase:window
autoHeight:false
uniqueNavElements:true
nested:false
watchOverflow:false
runCallbacksOnInit:true
init:true
on:
preloadImages:true
updateOnImagesReady:true
cssMode:false
updateOnWindowResize:true
resizeObserver:true
enabled:true
createElements:false
rewind:false
maxBackfaceHiddenSlides:10
modules:
Carousel (旋转木马)
slidesPerView:1
centeredSlides:false
centeredSlidesBounds:false
slidesPerGroup:1
slidesPerGroupSkip:0
slidesPerGroupAuto:false
spaceBetween:0
slidesOffsetBefore:0
slidesOffsetAfter:0
normalizeSlideIndex:true
centerInsufficientSlides:false
Loop (无限循环)
loop:false
loopAdditionalSlides:0
loopedSlides:1
loopFillGroupWithBlank:false
loopPreventsSlide:true
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:false
resistance:true
resistanceRatio:0.85
edgeSwipeDetection:false
edgeSwipeThreshold:20
passiveListeners:true
touchReleaseOnEdges:false
touchEventsTarget:wrapper
Swiping / No swiping(禁止切换)
noSwiping:true
noSwipingClass:swiper-no-swiping
noSwipingSelector:
allowSlideNext:true
allowSlidePrev:true
swipeHandler:null
focusableElements:input, select, option, textarea, button, video, label
preventInteractionOnTransition:false
Observer (监视器)
observer:false
observeParents:false
observeSlideChildren:false
Namespace (命名空间)
wrapperClass
slideClass
slideActiveClass
slideVisibleClass
slideDuplicateClass
slideNextClass
slidePrevClass
slideDuplicatedActiveClass
slideDuplicatedNextClass
slideDuplicatedPrevClass
containerModifierClass
Events (事件)
init(swiper)
touchStart(swiper,event)
touchMove(swiper,event)
touchEnd(swiper,event)
slideChangeTransitionStart(swiper)
slideChangeTransitionEnd(swiper)
imagesReady(swiper)
transitionStart(swiper)
transitionEnd(swiper)
touchMoveOpposite(swiper,event)
sliderMove(swiper,event)
click(swiper,event)
tap(swiper,event)
doubleTap(swiper,event)
progress(swiper,progress)
reachBeginning(swiper)
beforeDestroy(swiper)
reachEnd(swiper)
setTransition(swiper,transition)
resize(swiper)
setTranslate(swiper,translate)
slideNextTransitionStart(swiper)
slideNextTransitionEnd(swiper)
slidePrevTransitionStart(swiper)
slidePrevTransitionEnd(swiper)
fromEdge(swiper)
toEdge(swiper)
slideChange(swiper)
beforeLoopFix(swiper)
loopFix(swiper)
observerUpdate(swiper)
breakpoint(swiper)
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.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, ...)
mySwiper.setProgress(progress, speed)
mySwiper.enable()
mySwiper.disable()
组件
Autoplay (自动切换)
autoplay:false
delay:3000
stopOnLastSlide:false
disableOnInteraction:true
reverseDirection:false
waitForTransition:true
pauseOnMouseEnter:false
mySwiper.autoplay.running:
mySwiper.autoplay.start():
mySwiper.autoplay.stop():
autoplay(swiper):
autoplayPause(swiper):
autoplayResume(swiper):
autoplayStart(swiper):
autoplayStop(swiper):
Free Mode (自由模式/撞击反弹)
freeMode:false
enabled:true
momentum:true
momentumBounce:true
momentumBounceRatio:1
momentumRatio:1
minimumVelocity:0.02
momentumVelocityRatio:1
sticky:false
Grid (网格/多行多列布局)
grid:
fill:column
rows:1
Manipulation (动态操纵)
mySwiper.appendSlide(slides):
mySwiper.prependSlide(slides):
mySwiper.addSlide(index, slides:
mySwiper.removeSlide(index):
mySwiper.removeAllSlides():
Parallax (视差效果)
parallax:false
Effects (切换效果)
effect:slide
fadeEffect:
cubeEffect:
coverflowEffect:
flipEffect:
cardsEffect:
creativeEffect:
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:false
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():
pageUpDown:true
Mousewheel (鼠标)
mousewheel:false
forceToAxis:false
releaseOnEdges:false
invert:false
sensitivity:1
eventsTarged:container
mySwiper.mousewheel.enabled:
mySwiper.mousewheel.enable():
mySwiper.mousewheel.disable():
thresholdDelta:null
thresholdTime:null
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(swiper, slideEl, :
lazyImageReady(swiper, slideEl,:
Zoom (调焦)
zoom:
maxRatio:3
minRatio:1
toggle:true
containerClass:swiper-zoom-container
zoomedSlideClass:swiper-slide-zoomed
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
autoScrollOffset:0
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
hashChange:
hashSet:
History Navigation (历史导航)
history:
replaceState:false
key:slides
root:
A11y (无障碍阅读)
a11y:

a11y

A11y(无障碍阅读)为残障人士浏览网页提供辅助功能,在屏幕阅读器添加语音提示等信息。
swiper默认开启a11y,当你点击swiper时,设备会发出声音提示你正在进行的操作。你可以开启手机的屏幕阅读来测试这个功能。
iPhone开启方法:设置->辅助功能->旁白 。手机如何开启屏幕阅读?
参数名 类型 默认值 描述
enabled boolean true 启动A11y,并为swiper增加一个实时区域(live regions)①
prevSlideMessage string 'Previous slide' 在屏幕阅读器为上一页按钮添加标签信息 ②
nextSlideMessage string 'Next slide' 在屏幕阅读器为下一页按钮添加标签信息 ②
firstSlideMessage string 'This is the first slide' 在屏幕阅读器当处于第一个slide为上一页按钮添加信息①
lastSlideMessage string 'This is the last slide' 在屏幕阅读器当处于最后一个slide为下一页按钮添加信息①
paginationBulletMessage string 'Go to slide {{index}}' 在屏幕阅读器为分页器小点添加标签信息 ②
notificationClass string 'swiper-notification' A11y 实时区域的类名
containerMessage string null 在屏幕阅读器为container添加标签信息(6.3.0) ②
containerRoleDescriptionMessage string null 在屏幕阅读器为container添加语义描述(6.3.0) ④
itemRoleDescriptionMessage string null 在屏幕阅读器为slide添加语义描述(6.3.0) ④
slideLabelMessage string '{{index}} / {{slidesLength}}' 在屏幕阅读器为slide添加标签信息(6.5.1) ②
slideRole string 'group' 在屏幕阅读器为slide添加语义(6.5.8) ③

① aria live regions:实时区域。使用辅助工具的用户通过live region可以获知文档的变更部分,而且焦点仍保留在当前活动中。就像AJAX
② aria-label:给当前元素加上的标签描述,例如“进入下一页”,“返回上一页”。
③ role:为一个非标准的tag添加语义。比如用div做button,那么设置div 的 role="button",辅助工具就可以认出这实际上是个button。
④ aria-roledescription:语义的描述

关于无障碍浏览

  • 网络无障碍俗称可访问性,英文accessibility,简称[a11y]
  • Accessible Rich Internet Applications (ARIA) 是能够让残障人士更加便利的访问 Web 内容和使用 Web 应用的一套机制。
  • W3C Web Accessibility Initiative (WAI) 互联网针对无障碍推出指导纲领。

a11y信息

类型:
object/boolean
启用版本:
4.0.0

效果演示

slider1
slider2
slider3
 
 

使用方法示例

从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<script language="javascript"> 
  var mySwiper = new Swiper('.swiper',{
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
    },
    a11y : {
      prevSlideMessage: 'Previous slide',
      nextSlideMessage: '点击可进入下一页幻灯片',
      firstSlideMessage: 'This is the first slide',
      lastSlideMessage: 'This is the last slide',
      paginationBulletMessage: 'Go to slide {{index}}',  
      notificationClass: 'swiper-notification',
      containerMessage: 'banner',
      containerRoleDescriptionMessage: 'This is a swiper',  //aria-role-description
      itemRoleDescriptionMessage: 'slider',
      slideLabelMessage: '{{index}} / {{slidesLength}}',
      slideRole: 'group',
    },
  }) 
</script>

转载原创文章请注明:文章转载自:Swiper中文网 [https://www.swiper.com.cn]
本文地址:https://www.swiper.com.cn/api/a11y/268.html