Swiper文档参数

Swiper介绍

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

Swiper结构和基础原理

Swiper 的每个展示块(屏)为一个slideslide中放置图片或文字等展示的内容,全部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障碍使用辅助