Swiper 的结构和基础原理

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

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

复制代码
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../public/img/2.jpg" alt=""></div>
        <div class="swiper-slide"><img src="../public/img/4.jpg" alt=""></div>
    </div>
</div>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        autoplay: true,//可选选项，自动滑动
    })
</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 障碍使用辅助