<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>

........

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结束时执行

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"（创意性）