vue-agile是一个受Slick.js库启发的简单，可自定义，启用触摸的轮播组件。

安装和下载：

# Yarn
$ yarn add vue-agile

# NPM
$ npm i vue-agile --save

如何使用它：

1.导入并注册vue-agile组件。

// 全局
import Vue from 'vue'
import VueAgile from 'vue-agile'
Vue.use(VueAgile)

// 组件
import { VueAgile } from 'vue-agile'
export default { 
  components: {
    agile: VueAgile 
  }
}

2.将幻灯片添加到轮播中。

<template>
  <agile :prop="value">
    <div class="slide">
      <h3>slide 1</h3>
    </div>
    <div class="slide">
      <h3>slide 2</h3>
    </div>
    <div class="slide">
      <h3>slide 3</h3>
    </div>
    ...
  </agile>
</template>

3.可用 props 。

/**
 * 将旋转木马设置为其他旋转木马的导航
 */
asNavFor: {
  type: Array,
  default: function () {
    return []
  }
},

/**
 * 启用自动播放
 */
autoplay: {
  type: Boolean,
  default: false
},

/**
 * 自动播放间隔(毫秒)
 */
autoplaySpeed: {
  type: Number,
  default: 3000
},

/**
 * 当slidesToShow >时启用居中视图1
 */
centerMode: {
  type: Boolean,
  default: false
},

/**
 * 幻灯片填充在中心模式
 */
centerPadding: {
  type: String,
  default: '15%'
},

/**
 * 幻灯片更改延迟(毫秒)
 */
changeDelay: {
  type: Number,
  default: 0
},

/**
 * 启用点指标/分页
 */
dots: {
  type: Boolean,
  default: true
},

/**
 * 使褪色效果
 */
fade: {
  type: Boolean,
  default: false
},

/**
 * 无限循环滑动
 */
infinite: {
  type: Boolean,
  default: true
},

/**
 * 幻灯片的索引开始
 */
initialSlide: {
  type: Number,
  default: 0
},

/**
 * 启用移动计算响应设置
 */
mobileFirst: {
  type: Boolean,
  default: true
},

/**
 * 启用prev/next导航按钮
 */
navButtons: {
  type: Boolean,
  default: true
},

/**
 * 所有设置都作为一个对象
 */
options: {
  type: Object,
  default: () => null
},

/**
 * 当圆点悬停时暂停自动播放
 */
pauseOnDotsHover: {
  type: Boolean,
  default: false
},

/**
 * 当滑块悬停时，暂停自动播放
 */
pauseOnHover: {
  type: Boolean,
  default: true
},

/**
 * 包含断点和设置对象的对象
 */
responsive: {
  type: Array,
  default: () => null
},

/**
 * 启用从右到左的模式
 */
rtl: {
  type: Boolean,
  default: false
},

/**
 * 滚动的幻灯片数量
 */
slidesToScroll: {
  type: Number,
  default: 1
},

/**
 * 要显示的幻灯片数量
 */
slidesToShow: {
  type: Number,
  default: 1
},

/**
 * 幻灯片动画速度(毫秒)
 */
speed: {
  type: Number,
  default: 300
},

/**
 * 滑动距离
 */
swipeDistance: {
  type: Number,
  default: 50
},

/**
 * 油门延迟(毫秒)
 */
throttleDelay: {
  type: Number,
  default: 500
},

/**
 * 过渡时间函数
 * 可用: ease, linear, ease-in, ease-out, ease-in-out
 */
timing: {
  type: String,
  default: 'ease',
  validator: (value) => {
    return ['ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out'].indexOf(value) !== -1
  }
},

/**
 * 禁用敏捷的旋转木马
 */
unagile: {
  type: Boolean,
  default: false
}

4. API方法。

getCurrentBreakpoint()
getCurrentSettings()
getCurrentSlide()
getInitialSettings()
goTo()
goToNext()
goToPrev()
reload()