------------ ------------ restore content begins
https://wlada.github.io/vue-carousel-3d/
When developing visualization project, you need 3d carousel map, asking many find this component, simple reference, and finally achieve the results were good. Found on this component, can be found to the small tutorial, I share with you my experience.
1, the mounting assembly
npm install -S vue-carousel-3d
2, the introduction means
In introducing the desired display page file this component vue
import { Carousel3d, Slide } from 'vue-carousel-3d'
export default {
...
components: {
Carousel3d,
Slide
}
...
}
3, the page writing unit structure
<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>
Define an array to store all required rotation display of FIG.
slides: [
{
src: 'xxxx',
},
{
src: 'xxxx',
},
{
src: 'xxxx',
},
]
At this point 3d carousel components will appear again on your page.