1. 在项目中引入swiper的js和css文件
<script src=”dist/js/
swiper-bundle.min.js
“></script><link rel=”stylesheet” href=”dist/css/
swiper-bundle.min.css
“>
2. 设置容器、基本结构
<div class=”swiper”>
最大的容器，swiper7之前默认类名为swiper-container
<div class=”swiper-wrapper”>
<div class=”swiper-slide”></div>
切换的每一页
<div class=”swiper-slide”></div>
<div class=”swiper-slide”></div>
……..
</div>
</div>
3. 初始化swiper
第一种：
var mySwiper = new Swiper(‘.swiper’,{一些配置api})
第二种：
new Swiper(‘.swiper’)
var mySwiper = document.querySelector(‘.swiper’).swiper
通过swiper的HTML元素获取实例
mySwiper.slideNext()/其他的一些配置
4. swiper的api
initialSlide
: 2， 初始化的时候展示第几个slide，默认值为0
direction
: horizontal / vertical，设置slide排列方向，默认水平方向
speed
: 300，切换速度，默认300
grabCursor
: true， 鼠标移上变抓手，默认false
watchSlidesProgress
: true，监控slide切换的进程，swiper的进程开启无需设置swiper进程：最开始为0，最后为1，中间为1的平分
slide进程：目前显示的为0，前面的依次加一，后面的依次减一（活动块slide是第三个，那么从第一个到第六个的progress属性分别是：2、1、0、-1、-2、-3）
width/height
:px，强制swiper的宽高，默认是自适应，取值undefined取消强制宽高变为自适应
roundLengths
:true/3，slide宽高四舍五入或根据设置的数值取整
autoHeight
: true, 高度随内容（slide）变化
breakpoints
：{ 断点，类似于媒体查询320：{}， 屏幕宽度大于320
768：{}， 屏幕宽度大于768
…….
}
可设置的：
slidesPerView、slidesPerGroup、 spaceBetween、grid.rows、slidesPerGroupSkip、direction等
breakpointsBase
: ‘container’，设置断点计算的标准，默认为window
uniqueNavElements
: false，导航元素默认唯一，false代表可以有多个导航元素共同作用
nested
: true，用于同方向嵌套的swiper，true代表切换到子swiper时，父swiper停止
watchOverflow
: true，仅有1个slide，swiper无效，自动隐藏导航等
on
：{事件：function(swiper){this.activeIndex—-slide的序号},事件：function(){},事件：function(){},….} 给swiper添加事件，swiper和this都可指代当前实例init—-初始化
touchStart: function(swiper,event){} —-碰触到slider时执行
touchEnd: function(swiper,event){} —-触摸释放时执行
slideChangeTransitionStart —-swiper从当前slide开始过渡到另一个slide时执行
slideChangeTransitionEnd —-swiper从一个slide过渡到另一个slide结束时执行
init
: false，swiper是否立即初始化，设定为false时后续可用mySwiper.init()再初始化
preloadImages
:false，默认为true，强制加载完所有图片后再初始化
updateOnImagesReady
: true，加载完图片后swiper重新初始化，使用此选项需要先开启preloadImages: true
updateOnWindowResize
: true，默认当窗口(window) 尺寸发生变化时，比如屏幕旋转，Swiper会更新和重新计算update和breakpoint等
enabled
: false，禁用、启用swiper
createElements
: true，自动生成元素或者写为：navigation: true, scrollbar: true等
rewind
:true，在最后一个Slide 上单击“next”导航按钮（或调用
.slideNext()
）将滑回到第一个Slide。在第一个Slide 上单击“prev”导航按钮（或调用
.slidePrev()
）将滑动到最后一个Slide
loop: true，会在原本slide 前后复制若干个slide (默认一个)并在合适的时候切换，让Swiper看起来像是循环的
5. 组件
分页器
<div class=”swiper-pagination”></div>
pagination: { el: ‘.swiper-pagination’, }
切换按钮
<div class=”swiper-button-prev”></div>
<div class=”swiper-button-next”></div>
navigation: { nextEl: ‘.swiper-button-next’, prevEl: ‘.swiper-button-prev’, }
滚动条
<div class=”swiper-scrollbar”></div>
scrollbar: { el: ‘.swiper-scrollbar’, }
切换效果
effect: 默认为”slide”（普通位移切换），还可设置为”fade”（淡入）、”cube”（方块）、”coverflow”（3d流）、”flip”（3d翻转）、”cards”(卡片式)、”creative”（创意性）