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

------------恢复内容开始------------

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: {

扫描二维码关注公众号,回复: 9429868 查看本文章

    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轮播组件会显示再你的页面中。

猜你喜欢

转载自www.cnblogs.com/zhuoshengjie/p/12369994.html