快速导航 全部展开

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障碍使用辅助 
    © 2022 swiperjs中文网 - www.swiperjs.net All rights reserved. 学习交流QQ群(175169930)： SwiperJS学习交流群
    0.814206s