vue 3d轮播组件 vue-carousel-3d

开发可视化项目时，需要3d轮播图，找来找去发现这个组件，引用简单，最后实现效果还不错。发现关于这个组件，能搜到的教程不多，就分享一下我的经验。

插件github地址：https://wlada.github.io/vue-carousel-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轮播组件会显示再你的页面中。

巴特西

vue 3d轮播组件 vue-carousel-3d

最新文章

热门文章