swiper基本使用

需求：轮播图两侧的前进后退按钮在轮播图之外，swiper官方看了一眼没找到，做个随笔记录一下

swiper版本为5

最终效果

原理

轮播图最外层容器 .swiper-wrapper 设置了 overflow:hidden;，直接将前进后退按钮和分页器定位到容器之外会隐藏。

所以在 .swiper-wrapper 外套了一层 #swiper-father 容器，并添加定位属性，让其子元素相对它绝对定位，该容器左右和下方都留出位置，供前进后退按钮和分页器占位。

前进后退按钮和分页器放在与 #swiper-father 容器同级下，即可完成需求

代码实现