項目需求大概是這個樣子，這種并不能通過圍成一周再旋轉(zhuǎn)父級實現(xiàn)，因此圖方便選擇了組件
輪播
?
?vue2，可以直接使用?Playground - Vue Carousel 3D - 3D Carousel for Vue.js
?進行改造成自己需要的樣子。文檔為英文，中文可參考這位
Vue 3D輪播插件vue-carousel-3d_memory_zzz的博客-CSDN博客
以上API過少，可以使用 ref 綁定，通過onSlideChange打印出所有掛載的屬性和函數(shù)
?
?
?其中，goNext() 和 goPrev()為左右移位，goFar（index）和 goSlide（index）可以跳到對應(yīng)的位置，只是表現(xiàn)形式不同（個人淺顯理解）。以上就是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
官網(wǎng)推薦是這樣的
?我稍微改動了下 ，在main.ts 中 放入這三行代碼，
import Carousel3d from 'vue3-carousel-3d';
import "vue3-carousel-3d/dist/index.css"
app.use(Carousel3d)
然后在輪播頁我注釋掉了這些
然后vue3基本可以實現(xiàn)了。有部分人vite的項目可能會遇到這樣的報錯
?可以通過
在?vite.confg.js?文件中添加如下配置
resolve: {
dedupe: [
'vue'
],
}重新啟動項目后就可以了，注意有的沒出現(xiàn)也有可能沒給寬高。
vue3內(nèi)完整代碼如下：文章來源：http://www.zghlxwxcb.cn/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>
?以上為測試代碼，比較簡陋，供大家參考一下文章來源地址http://www.zghlxwxcb.cn/news/detail-474401.html
到了這里，關(guān)于vue2/3項目中使用Vue Carousel 3D實現(xiàn) Carousel 3D 輪播的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
