As shown in the figure, this is a 3D carousel effect of a large-screen project. Follow me below to implement this carousel effect in detail. Official website address: https://wlada.github.io/vue-carousel-3d/
As shown in the figure, these are some parameters and documents in the vue-carousel-3d plugin in the wheel factory. Can refer to. Address: Wheel Factory
installation
npm install -S vue-carousel-3d
transfer
1. Global registration, main.js
import Vue from 'vue'
import Carousel3d from 'vue-carousel-3d'
Vue.use(Carousel3d
2. Partial registration in the component
import {
Carousel3d, Slide } from "vue-carousel-3d";
export default {
components: {
Carousel3d,
Slide,
},
}
html part
<template>
<div class="c_wrap">
<div class="c_title">IT预算投入（万元）</div>
<div class="c_carousel"></div>
<carousel-3d
:autoplay="true"
:autoplayTimeout="3000"
:display="5"
:width="320"
:height="334"
:animationSpeed="1000"
>
<slide class="carousel_box" v-for="(item, index) in earthData" :key="index" :index="index">
<div class="carousel_flashlight">
<p>{
{
item.stext}}</p>
<h3>{
{
item.sdescription}}</h3>
</div>
</slide>
</carousel-3d>
</div>
</template>
js part
<script>
import {
Carousel3d, Slide } from "vue-carousel-3d";
export default {
components: {
Carousel3d,
Slide,
},
props: {
earthData: {
default: () => {
return {
};
},
},
},
data() {
return {
earthData: [
{
stext: "标题1",
sdescription: "1",
},
{
stext: "标题2",
sdescription: "2",
},
{
stext: "标题3",
sdescription: "3",
},
{
stext: "标题4",
sdescription: "4",
},
{
stext: "标题5",
sdescription: "5",
},
],
};
},
};
</script>
css part
.c_wrap {
width: 100%;
height: 370px;
.c_title {
width: 252px;
height: 53px;
line-height: 53px;
text-indent: 37px;
background: linear-gradient(270deg, rgba(45, 110, 251, 0) 0%, #2d6efb 100%);
color: #fff;
margin: 0 auto;
font-size: 20px;
}
}
.carousel_box {
width: 100%;
display: flex;
.carousel_flashlight {
flex: 1;
height: 334px;
background: url("~assets/img/pedestal.png") no-repeat center bottom;
text-align: center;
p {
font-size: 20px;
font-weight: 500;
text-align: center;
color: #51e8ec;
line-height: 28px;
}
h3 {
font-size: 84px;
font-family: "digital-7";
text-align: center;
color: #ffffff;
line-height: 101px;
}
}
}
// 覆盖轮播样式
.carousel-3d-slide {
background: none;
border: 0px;
}
In this way, a simple 3d carousel diagram is complete. However, our project is a large-screen project, so we need to realize that the width of the carousel changes with the browser window. Because the width of each item in vue-carousel-3d is fixed and hard-coded. So you can only set the width to a variable, and then get the width of the browser, and change the width of the single variable of the carousel according to the width of the browser.
Modify width
created() {
this.changeWidth();
},
mounted() {
window.onresize = () => {
this.changeWidth();
};
},
methods: {
//根据电脑分辨率设置轮播图宽度
changeWidth() {
if (
document.body.clientWidth >= 1700 &&
document.body.clientWidth < 1920
) {
this.cWidth = 260;
}
if (
document.body.clientWidth >= 1500 &&
document.body.clientWidth < 1700
) {
this.cWidth = 220;
}
if (document.body.clientWidth < 1500) {
this.cWidth = 180;
}
},
},
In this way, the individual items of the carousel can be modified in width according to the changes in the browser window, and a simple adaptive 3D carousel is completed.