快速导航全部展开

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

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, 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文档参数

Swiper介绍

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。在wide中Swiper只能用于无序列表和有序列表。

Swiper结构和基础原理

Swiper 的每个展示块（屏）为一个slide，slide中放置图片或文字等展示的内容，全部slide排成一行(或多行)包含在包装器wrapper中，而总容器container 又包裹着wrapper和箭头按钮控件navigation以及分页器控件pagination。

当手指（或鼠标）触摸滑动Swiper时，Swiper在浏览器每一帧通过计算滑动的距离差对wrapper进行位移（transform）从而产生拖动的效果。在手指（或鼠标）释放时，计算下一个slide的起始位置对wrapper设置位移动画（transition），从而产生切换动画效果。

Swiper7的API变化

Swiper容器的默认类名变更为.swiper'，之前是.swiper-container。新增两个3D过渡效果，自由模式和网格组件化。

Swiper5的API变化

Swiper5 增加了CSS模式（cssMode），并且可以通过CSS文件修改Swiper颜色风格。

Swiper4的API变化

Swiper4 将组件的相关选项整合起来了，并且修改了回调函数获取swiper 实例的方式为this关键词。

Swiper3 Swiper4 Swiper5重要变化

Swiper5/Swiper4

Swiper3

autoplay组件

    <script>
    var mySwiper = new Swiper('.swiper-container', {
      autoplay: {
             stopOnLastSlide: true
      }
    })
    </script>

    <script>
    var mySwiper = new Swiper('.swiper-container', {
      autoplay: 3000,
      stopOnLastSlide: true
    })
    </script>

pagination组件

    <script>
    var mySwiper = new Swiper('.swiper-container', {
      el: '.swiper-pagination',
      clickable: true,
    })
    </script>

    <script>
    var mySwiper = new Swiper('.swiper-container', {
      pagination: '.swiper-pagination',
      paginationClickable: true
    })
    </script>

回调函数this

    <script>
    var mySwiper = new Swiper('.swiper-container', {
      on: {
        click:function(){
          console.log(this.clickedIndex)
        }
      }
    })
    </script>

    <script>
    var mySwiper = new Swiper('.swiper-container', {
      onClick: function(swiper){
          console.log(this.clickedIndex)
      }
    })
    </script>

组件列表

模块	功能	版本
Navigation	按钮
Pagination	分页器
Scrollbar	滚动条
Autoplay	自动切换
FreeMode	自由模式	7.0.0
Grid	网格分布	7.0.0
Manipulation	动态操纵	7.0.0
Parallax	视差效果
Lazy	延迟加载图片
EffectFade	渐变过渡
EffectCoverflow	行进翻转过渡
EffectFlip	翻转过渡
EffectCube	方块过渡
EffectCards	卡片过渡	7.0.0
EffectCreative	创意性过渡	7.0.0
Thumbs	缩略图	4.4.1
Zoom	缩放
Keyboard	键盘
Mousewheel	鼠标
Virtual	虚拟块
HashNavigation	锚导航
History	历史导航
Controller	双向控制
A11y	障碍使用辅助

快速导航 全部展开