# 组件文档说明

## 下载依赖
### npm install vue-awesome-swiper  --save
### npm install swiper@5.3.6  --save

## options设置
### 1
切换效果 fade cube coverflow flip
effect: 'flip',
样式设定
fadeEffect: {
淡出fade
crossFade: true,
方块切换 cube
slideShadows: true,
shadow: true,
shadowOffset: 100,
shadowScale: 0.6,
coverflow
slidesPerView: 3,
centeredSlides: true,
coverflowEffect: {
  rotate: 30,
  stretch: 10,
  depth: 60,
  modifier: 2,
  slideShadows: true,
},
flip
slideShadows: true,
limitRotation: true,
},
### 2
不可拖动文字
noSwiping: true,
### 3
当你的Swiper在过渡时将无法滑动
preventInteractionOnTransition : true,
短切换，长切花
shortSwipes: false,
自由滑动，不知道滑过几个
freeMode: true,
### 4
设置预览值 px
slidesOffsetBefore: 100,
显示多行
slidesPerView: 3, //一行显示3个
slidesPerColumn: 2, //显示2行
### 5
一页显示三个，一组为三个
slidesPerView: 3,
slidesPerGroup: 3,
### 6
slidesPerView: 2,
//slidesPerView : 'auto',    根据slide的宽度自动调整展示数量。此时需要设置slide的宽度，如下style所示
//slidesPerView : 3.7,
### 7
默认居中，并一页显示三个，第一条在左侧
slidesPerView: 3,
centeredSlides: true,
centeredSlidesBounds: true,
### 8
默认居中，并一页显示三个，第一个在中间
slidesPerView: 3,
centeredSlides: true,
### 9
如果有一个数据时，所有分页，按钮，分页点全部失效
watchOverflow: true,
### 10
滑过触发回调
runCallbacksOnInit: true,
on: {
  slideChangeTransitionStart: function() {
    选中值
    console.log(this.activeIndex);
  },
},
### 11
自适应高度 随silde变化而变化
autoHeight: true,
### 12
默认一页显示数
slidesPerView: 4,
数据间隔 px
spaceBetween: 30,
不同屏幕配置
breakpoints: {
  320: {
    //当屏幕宽度大于等于320
    slidesPerView: 2,
    spaceBetween: 10,
  },
  768: {
    //当屏幕宽度大于等于768
    slidesPerView: 3,
    spaceBetween: 20,
  },
  1280: {
    //当屏幕宽度大于等于1280
    slidesPerView: 4,
    spaceBetween: 30,
  },
},
### 13
鼠标滑过显示小手
grabCursor: true,
### 14
自动滑过贴合时间
speed: 300,
autoplay: {
  默认3秒切换一次
  delay: 3000,
到最后一个自动停止
stopOnLastSlide: true,
触碰当前页自动停止
disableOnInteraction: true,
反向自动轮播
reverseDirection: true,
},
### 15
自动滑过
autoplay: true,
//鼠标覆盖停止自动切换
### 16
默认索引值，0：开始
initialSlide: 0,
### 17
垂直切换选项
direction: 'vertical',
### 18
循环轮播
loop: true,
### 19
分页
pagination: {
el: '.swiper-pagination',
clickable为true时，点击小点控制轮播
clickable: true,
分页类型
type: 'bullets',//点
type: 'fraction',//数字
type: 'progressbar',//上条
type: 'custom', //自定义
progressbarOpposite: true,//progressbar-左条
bulletElement: 'li',//指定标签
dynamicBullets: true,//bullets-点数过多，隐藏
dynamicMainBullets: 4,//显示点数量
hideOnClick: true,//点击数据时，隐藏分页
自定义点样式
renderBullet: function(index, className) {
  return '<span class="' + className + '">' + (index + 1) + '</span>';
},
设置分式
type: 'fraction',
renderFraction: function(currentClass, totalClass) {
  return '<span class="' + currentClass + '"></span>' + ' of ' + '<span class="' + totalClass + '"></span>';
},
自定义点样式
type: 'custom',
renderCustom: function(swiper, current, total) {
  return current + ' of ' + total;
},
bulletClass: 'my-bullet', //需设置.my-bullet样式
bulletActiveClass: 'my-bullet-active', //需设置my-bullet-active样式
},
### 20
按钮导航
navigation: {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev',
},