Swiper 整理

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