vue2/3项目中使用Vue Carousel 3D实现 Carousel 3D 轮播

项目需求大概是这个样子，这种并不能通过围成一周再旋转父级实现，因此图方便选择了组件

轮播

 

 vue2，可以直接使用 Playground - Vue Carousel 3D - 3D Carousel for Vue.js

 进行改造成自己需要的样子。文档为英文，中文可参考这位

Vue 3D轮播插件vue-carousel-3d_memory_zzz的博客-CSDN博客

以上API过少，可以使用 ref 绑定，通过onSlideChange打印出所有挂载的属性和函数

 

 

 其中，goNext() 和 goPrev()为左右移位，goFar（index）和 goSlide（index）可以跳到对应的位置，只是表现形式不同（个人浅显理解）。以上就是vue2使用Vue Carousel 3D的大概方法，在此简单概述。

安装并在main.js引入后的完整代码

以下重点说一下vue3中的使用。

费了不少力气然后查到有Vue3 Carousel 3D 这个东西。

https://www.npmjs.com/package/vue3-carousel-3d

于是在自己的私人项目里测试了下，

npm install vue3-carousel-3d
# or
yarn add vue3-carousel-3d

官网推荐是这样的

 我稍微改动了下 ，在main.ts 中 放入这三行代码，

import Carousel3d from 'vue3-carousel-3d';

import "vue3-carousel-3d/dist/index.css"

app.use(Carousel3d)

然后在轮播页我注释掉了这些

然后vue3基本可以实现了。有部分人vite的项目可能会遇到这样的报错

 可以通过

在 vite.confg.js 文件中添加如下配置

resolve: {
      dedupe: [
        'vue'
      ],
}

重新启动项目后就可以了，注意有的没出现也有可能没给宽高。

vue3内完整代码如下：

 以上为测试代码，比较简陋，供大家参考一下