------------恢復內容開始------------
https://wlada.github.io/vue-carousel-3d/
開發可視化項目時，需要3d輪播圖，找來找去發現這個組件，引用簡單，最后實現效果還不錯。發現關於這個組件，能搜到的教程不多，就分享一下我的經驗。
1，安裝組件
npm install -S vue-carousel-3d
2, 引入組件
在所需要顯示此組件的頁面vue文件中引入
import { Carousel3d, Slide } from 'vue-carousel-3d'
export default {
...
components: {
Carousel3d,
Slide
}
...
}
3,頁面結構中寫入組件
<carousel-3d :autoplay="true">
<slide v-for="(slide, i) in slides" :key="i" :index="i">
<template slot-scope="{ index, isCurrent, leftIndex, rightIndex}">
<img
:data-index="index"
:class="{ current: isCurrent, onLeft: (leftIndex >= 0), onRight: (rightIndex >=0)}"
src="slide.src"
>
</template>
</slide>
</carousel-3d>
定義數組來儲存需要顯示都輪播圖
slides: [
{
src: 'xxxx',
},
{
src: 'xxxx',
},
{
src: 'xxxx',
},
]
至此3d輪播組件會顯示再你的頁面中。