项目需求大概是这个样子，这种并不能通过围成一周再旋转父级实现，因此图方便选择了组件
轮播
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引入后的完整代码
<template>
<div >
<carousel-3d ref="carousel" :perspective="30" :inverseScaling="500" :space="400" :loop="false" @before-slide-change="onSlideChange">
<slide v-for="(item,index) in Lists" :key="index" :index='index'>
<div class="carouselTitle">{{item.title}}</div>
<div class="carouselContent">{{item.text}}</div>
</slide>
</carousel-3d>
<div class="enums" >
<div class="enums-list" @click="goSlideIndex(index)" height="20px" v-for="(item,index) in Lists" :key="index">
{{ item.title }}
</div>
</div>
</div>
</template>
<script>
import { Carousel3d, Slide } from "vue-carousel-3d";
// import Carousel3d from 'vue-carousel-3d';
export default {
components: {
Carousel3d,
Slide,
},
data(){
return{
Lists:[
{
title: '1',
text:"xxxxxx ",
},
{
title: '2',
text:"xxxxxx ",
},
{
title: '3',
text:"xxxxxx ",
},
{
title: '4',
text:"xxxxxx ",
},
{
title: '5',
text:"xxxxxx ",
},
{
title: '6',
text:"xxxxxx ",
},
{
title: '7',
text:"xxxxxx ",
},
{
title: '8',
text:"xxxxxx ",
},
]
}
},
methods:{
onSlideChange(temp){
console.log(this.$refs.carousel,'xxx');
this.carouselIndex = temp;
},
goSlideIndex(index){
// this.$refs.carousel.goNext(index)
if(index>this.Lists.length-1 || 0>this.Lists.length-1){
return;
}
// this.$refs.carousel.goSlide(index);
this.$refs.carousel.goFar(index);
},
}
};
</script>
<style lang="less" scoped>
/deep/.left-1 {
color: red;
transform: rotateY(-40deg) translateX(-400px) translateZ(100px) !important;
}
/deep/.left-2 {
color: red;
transform: rotateY(-40deg) translateX(-800px) translateZ(100px) !important;
}
/deep/.right-1 {
color: red;
transform: rotateY(40deg) translateX(400px) translateZ(100px) !important;
}
/deep/.right-2 {
color: red;
transform: rotateY(40deg) translateX(800px) translateZ(100px) !important;
}
.enums{
width: 300px;
height: 30px;
margin: 120px auto;
display: flex;
justify-content: center;
// border: 1px solid black;
}
.enums-list{
width: 30px;
height: 100%;
line-height: 30px;
border: 1px solid gray;
text-align: center;
}
</style>
以下重点说一下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内完整代码如下：文章来源：https://www.toymoban.com/news/detail-474401.html
<template>
<div>
<div style="width: 1200px; height: 200px; margin-top: 130px">
<carousel-3d
ref="carousel"
@before-slide-change="onSlideChange"
:autoplayTimeout="3000"
:perspective="35"
:display="5"
:animationSpeed="1000"
:width="300"
:height="270"
controlsVisible
:controlsHeight="60"
>
<slide v-for="(item, i) in lists" :index="i" :key="i">
<div class="carouselTitle">{{ item.title }}</div>
</slide>
</carousel-3d>
</div>
<div class="enums">
<div
class="enums-list"
@click="goSlideIndex(index)"
height="20px"
v-for="(item, index) in lists"
:key="index"
>
{{ item.title }}
</div>
</div>
</div>
</template>
<script>
// import { Carousel3d, Slide } from 'vue-carousel-3d'
export default {
// components: {
// Carousel3d,
// Slide
// },
data() {
return {
lists: [
{
title: '1',
},
{
title: '2',
},
{
title: '3',
},
{
title: '4',
},
{
title: '5',
},
{
title: '6',
},
],
};
},
methods: {
onSlideChange(temp) {
console.log(this.$refs.carousel, 'xxx');
this.carouselIndex = temp;
},
goSlideIndex(index) {
// this.$refs.carousel.goNext(index)
if (index > this.lists.length - 1 || 0 > this.lists.length - 1) {
return;
}
// this.$refs.carousel.goSlide(index);
this.$refs.carousel.goFar(index);
// console.log(this.$refs.carousel.goFar(index),'dadad');
},
},
};
</script>
<style lang="less" scoped>
:deep(.left-1) {
color: red;
transform: rotateY(-40deg) translateX(-400px) translateZ(100px) !important;
}
:deep(.left-2) {
color: red;
transform: rotateY(-40deg) translateX(-800px) translateZ(100px) !important;
}
:deep(.right-1) {
color: red;
transform: rotateY(40deg) translateX(400px) translateZ(100px) !important;
}
:deep(.right-2) {
color: red;
transform: rotateY(40deg) translateX(800px) translateZ(100px) !important;
}
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 200px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
.enums {
width: 300px;
height: 30px;
margin: 120px auto;
display: flex;
justify-content: center;
// border: 1px solid black;
}
.enums-list {
width: 30px;
height: 100%;
line-height: 30px;
border: 1px solid gray;
text-align: center;
}
</style>
以上为测试代码，比较简陋，供大家参考一下文章来源地址https://www.toymoban.com/news/detail-474401.html
到了这里，关于vue2/3项目中使用Vue Carousel 3D实现 Carousel 3D 轮播的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
