快速导航 全部展开
- new Swipe(实例化)
-
- new Swiper(swiperContainer, parameters) :
- Basic(基础参数)
-
- 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
- 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
- resizeObserver :true
- 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
- 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, paginationEl) :
- paginationUpdate(swiper, paginationEl) :
- 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, imageEl) :
- lazyImageReady(swiper, slideEl, imageEl) :
- 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(slide) :
- mySwiper.virtual.prependSlide(slide) :
- mySwiper.virtual.update() :
- mySwiper.virtual.removeSlide(slideIndexes); :
- mySwiper.virtual.removeAllSlides() :
- Hash Navigation(锚导航)
-
- hashNavigation :false
- watchState :false
- replaceState :false
- hashChange :
- hashSet :
- History Navigation(历史导航)
-
- history :
- replaceState :false
- key :slides
- root :
- A11y(无障碍阅读)
-
- a11y :
Swiper A11y(无障碍阅读) - a11y
A11y(无障碍阅读)为残障人士浏览网页提供辅助功能,在屏幕阅读器添加语音提示等信息。
swiper默认开启a11y,当你点击swiper时,设备会发出声音提示你正在进行的操作。你可以开启手机的屏幕阅读来测试这个功能。
iPhone开启方法:设置->辅助功能->旁白 。手机如何开启屏幕阅读?
① aria live regions:实时区域。使用辅助工具的用户通过live region可以获知文档的变更部分,而且焦点仍保留在当前活动中。就像AJAX
② aria-label:给当前元素加上的标签描述,例如“进入下一页”,“返回上一页”。
③ role:为一个非标准的tag添加语义。比如用div做button,那么设置div 的 role="button",辅助工具就可以认出这实际上是个button。
④ aria-roledescription:语义的描述
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>