swiper使用

swiper使用

初始化

var mySwiper = new Swiper ('容器区域类', {
 // 存放swiper属性 

 })

属性

基本属性：
	1.initialSlide  设定初始化时slide的索引,就是设置默认显示第几张图
	2.direction  swiper滑动方向 水平方向切换horizontal或垂直方向vertical
	3.speed    切换速度 毫秒单位
	4.breakpoints 类似媒体查询 eg:
         breakpoints: {
            320: {  //当屏幕宽度大于等于320
              slidesPerView: 2, //两个slide
              spaceBetween: 10
            },
            768: {  //当屏幕宽度大于等于768
              slidesPerView: 3,//三个slide
              spaceBetween: 20
            },
            1280: {  //当屏幕宽度大于等于1280
              slidesPerView: 4,//四个slide
              spaceBetween: 30 ,// slide间隔
            }
  }
	5.nested  嵌套的子swiper是否显示 布尔值
	6.init  swiper实例时是否立即初始化 默认true，禁止了，可以使用mySwiper.init()来初始化  -----重点
	7.on 注册事件 this指代Swiper实例 ----重点
		eg:
            on: {
                slideChange: function () {
                  console.log(this.activeIndex);
                },
              }
	或：mySwiper.on('slideChange', function () {});
	8.preloadImages 默认为true，Swiper会强制加载所有图片后才初始化 ----重点
	9.cssModes  布尔值 默认false 设置为true后PC端鼠标无法拖动，移动端可以滑动
	10.enabled 设置Swiper初始时是否可用,默认是可用true，当Swiper被禁用时，它将隐藏所有导航元素（分页器、按钮、滚动条）并且不会响应任何事件和交互。 可通过函数enable()和disable()动态启用或禁用Swiper ---难点
    11.createElements  自动生成导航元素的HTML  可以不用设置导航条,分页器等等

事件

所有事件需要在Swiper对象内的on里面存放或在实例外定义执行
1.init() 初始化
2.touchStart/Move/End/(swiper,event) 触碰slider时执行
	eg:touchStart: function(swiper,event){
      alert('事件触发了;');
    }
3.slideChangeTransitionStart/End(swiper) 当slide过渡到内外一个slide时或结束时执行
4.click(swiper,event) 点击swiper执行 有200-300延迟 swiper5有300延迟
	eg:on:{
        click: function(){
        alert('你点了Swiper');
      },
  }
5.top(swiper,event) 点击swiper执行 使用top作为点击函数
6.doubleTap(swiper,event) 双击swiper
7.reachBeginning/End(swiper) 重新回到开始/结束slide触发函数

网格slider分布

1.centeredSlides 设定为true时，active slide会居中，默认居左
2.centeredSlidesBounds  布尔值 第一个和最后一个Slide 始终贴合边缘
3.slidesPerView 设置slider容器能够同时显示的slides数量
4.spaceBetween  在slide之间设置距离（单位px）
5.slidesPerColumn 设置多少列。

free反弹滑动模式

1.freeMode 默认为false，普通模式：slide滑动时只滑动一格，设置为true则变为free模式，slide会根据惯性滑动可能不止一格且不会贴合
2.freeModeMomentumRatio free模式动量值(移动惯量),设置的值越大，当释放slide时的滑动时间越长。默认1s。
...

loop环路

1.loop 设置为true 则开启loop模式,loop模式在与free模式同用时会产生抖动 循环loop
2.loopPreventsSlide 循环过渡停顿再下一张slider效果

组件

1.autoplay 设置为true自动切换 默认设置 autoplay:ture等同于 autoplay:{
	delay:3000,//停顿三秒
	stopOnLastSlide: false,
    disableOnInteraction: true,
}
	(1)delay 切换的时间间隔
	(2)stopOnLastSlide 设置为true，当切换到最后一个slide时停止自动切换 loop模式下无效
	(3)disableOnInteraction 是否禁止autoplay。默认为true：停止
	(4)reverseDirection  开启反向自动轮播。默认false
	(5)pauseOnMouseEnte 开启此功能，鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
	(6)mySwiper.autoplay.start()/running/stop() 实例对象的方法 是否开启自动切换 开始/是否执行/暂停

2.effects切换效果
 默认为slide 普通切换
	(1)fade  淡入
	(2)cube  方块
	(3)coverflow  3d流
	(4)flip   3d翻转
		参数：
		slideShadows：slides的阴影。默认true。
		limitRotation：限制最大旋转角度为180度，默认true
		eg:
			effect : 'flip',
            flipEffect: {
            slideShadows : true,
            limitRotation : true,
           }

swiper与动画

步骤

1.导入swiper.js和animate.css
2.初始化隐藏元素控制动画
	 var mySwiper = new Swiper ('.swiper-container', {
    on:{
      init: function(){
        swiperAnimateCache(this); //隐藏动画元素
        swiperAnimate(this); //初始化完成开始动画
      },
      slideChangeTransitionEnd: function(){
        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
        //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
      }
    }
  })
 3.在运动元素添加类 ‘ani’后 可以使用动画参数
 <div class="swiper-slide">
	<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>  /可简写 s-a-effect/
</div>

切换效果（部分常用）

s-a-effact:" "
 bounce抖动系列
     1.bounce  抖动
     2.flash   闪动
     3.pulse   缩返
     4.rubberBand  拉伸抖缩
     5.wobble  摇头

  fade淡化系列
  	 1.fadeIn  淡入
  	  分支[
  	  	fadeInRight 右淡入
      	fadeInLeft  左淡入
        fadeInUp    上淡入
        fadeInDown  下淡入
      ]
  	 2.fadeOut 淡出
  	 分支[
  	 	fadeOutRight 右淡出
      	fadeOutLeft  左淡出
        fadeOutUp    上淡出
        fadeOutDown  下淡出
  	 ]
   flip  z轴旋转系列
     1.flip      旋转
     2.flipOutX  X轴旋出
     3.flipInX   X轴旋入