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

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

vue2/3项目中使用Vue Carousel 3D实现 Carousel 3D 轮播_第1张图片

轮播

 

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

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

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

vue2/3项目中使用Vue Carousel 3D实现 Carousel 3D 轮播_第2张图片

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

 vue2/3项目中使用Vue Carousel 3D实现 Carousel 3D 轮播_第3张图片

 vue2/3项目中使用Vue Carousel 3D实现 Carousel 3D 轮播_第4张图片

 其中,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

官网推荐是这样的

vue2/3项目中使用Vue Carousel 3D实现 Carousel 3D 轮播_第5张图片

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

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

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

app.use(Carousel3d)

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

vue2/3项目中使用Vue Carousel 3D实现 Carousel 3D 轮播_第6张图片

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

vue2/3项目中使用Vue Carousel 3D实现 Carousel 3D 轮播_第7张图片

 可以通过

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

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

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

vue3内完整代码如下:






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

你可能感兴趣的:(vue.js,javascript,前端,3d)