Vue.js的卡片传送带组件，使用户能够像堆叠卡片一样在幻灯片之间切换。

安装和下载：

# Yarn
$ yarn add vue-carousel-card

# NPM
$ npm install vue-carousel-card --save

如何使用它：

1.将组件和样式表导入项目。

import { CarouselCard, CarouselCardItem } from 'vue-carousel-card'
import 'vue-carousel-card/styles/index.css'

2.注册组件。

export default {
  components: { CarouselCard, CarouselCardItem }
}

// 或 SSR
import Vue from 'vue'
import {
  CarouselCard,
  CarouselCardItem
} from 'vue-carousel-card'
import 'vue-carousel-card/styles/index.css'

export default () => {
  Vue.component(CarouselCard.name, CarouselCard)
  Vue.component(CarouselCardItem.name, CarouselCardItem)
}

// nuxt.config.js
plugins: [
  '@/plugins/vue-carousel-card'
]

3.使用组件。

<CarouselCard :interval="7000" height="300px" type="card" arrow="always">
  <CarouselCardItem v-for="i in 6" :key="i">
    <h1 v-text="i"></h1>
  </CarouselCardItem>
</CarouselCard>

4.旋转木马的Props。

initialIndex: { 
  type: Number, 
  default: 0 
},

height: { 
  type: String, d
  efault: '200' 
},

trigger: { 
  type: String, 
  default: 'hover' 
},

autoplay: { 
  type: Boolean, 
  default: true 
},

interval: { 
  type: Number, 
  default: 3000 
},

indicatorPosition: { 
  type: String, 
  default: 'outside' // outside/none
},

indicator: { 
  type: Boolean, 
  default: true 
},

arrow: { 
  type: String, 
  default: 'hover' // always/hover/never
},

type: String // card

5.旋转木马Props。

label: {
  type: [String, Number],
  default: ''
}

6. API。

// 设置活动轮播项目
setActiveItem(index)

// 上一个
prev()

// 下一个
next()