Implementation steps
1. Determine the component type
Determine the component type, as shown in the above figure, standard carousel components
2. Choose the implementation method
1.1 Use existing components such as swpier to perform css style override
- advantage:Use existing components for style coverage, fast development speed
- shortcoming: There are many styles to cover, the writing is confusing, and the css foundation is insufficient, resulting in futility 1.2 Write a carousel common component yourself (Select）
- advantage: Exercise your own plug-in and unplug programming idea to facilitate later reuse, give people a rose, and leave the fragrance on your hands
3. Functional Requirements Analysis
This time we mainly talk about implementing components ourselves. After analysis, we need to meet the following functional points:
- 3.1 Construction space, meets the 3D appearance requirements, and is equipped with rotation animation and jitter after activation (jitter has not been implemented yet, if you need it, you can add the css animation interface yourself)
- 3.2 You can drag and drop sub-elements in the component. After the drag is finished, the selected sub-elements are activated.
- 3.3 Click on any child element to activate the child element of the click
4. Without further ado, please add the code
Copy the code below, paste it into the vue file, and it is ready to use.
<template>
<div class="wapper">
<main >
<div class="*"
:style="{
'transform':'rotateX('++'deg) rotateY('+(-*singleAngle)+'deg)'
}">
<div v-for="(item,index) in "
:key="index"
class="*Child"
:class="===?'activeChild *Child':'*Child'"
:style=" {
'--index': index+1,
'transform':'rotateY('+(singleAngle*index)+'deg) translateZ(320px)'
} "
@mousedown="handleDrapDown($event,item)"> <img :src="">
{{}}
</div>
</div>
</main>
</div>
</template>
<script>
export default {
name: 'demo',
components: {},
data () {
return {
// Carousel configuration *Options: {
//Default activated child element coordinates activeChildSort: 0,
//Is it allowed to drag and drop isDrop: false,
//Rotation angle rotate: 0,
// Inward inclination angle rotateX: -12,
// Carousel subelements data: [
{
sort: 0,
src: require("@/assets/"),
},
{
sort: 1,
src: require("@/assets/"),
},
{
sort: 2,
src: require("@/assets/"),
},
{
sort: 3,
src: require("@/assets/"),
},
{
sort: 4,
src: require("@/assets/"),
},
{
sort: 5,
src: require("@/assets/"),
},
],
},
}
},
watch: {
},
created () {
},
computed: {
//The angle occupied by a single element singleAngle () {
return parseInt(360 / )
},
},
mounted () {
},
destroyed () {
},
methods: {
//Reset resetPosition () {
if ( >= ) {
= 0
}
if ( < 0) {
= -1
}
},
//Rotation method startTurn (addflag, item) {
let * = (".*");
if (addflag === 0) {
-= 1
()
}
else if (addflag === 1) {
+= 1
()
}
else {
=
}
= ` transform: rotateX(` + + `deg) rotateY(${}deg); `;
},
//Trigger method of rotation //It's also the entrance handleDrapDown (de, item) {
const th = this
let stratPoint = || [0].clientX
let endPoint = || [0].clientX
= true;
// Here you can expand the movement of the mouse, and rotate to continue the animation effect of the movement as the movement continues. = (e) => {
if (!) return false;
();
}
= (e) => {
if (!) return;
endPoint = || [0].clientX;
= false;
if (stratPoint < endPoint) {
(0, item)
}
else if (stratPoint > endPoint) {
(1, item)
}
else {
(3, item)
}
}
}
}
}
</script>
<style lang="scss">
.wapper {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
main {
user-select: none;
position: relative;
width: 220px;
height: 130px;
// Official explanation: The distance between the observer and the plane z=0 is specified, so that elements with three-dimensional position transformation can produce a perspective effect // You can use this value to observe the effect perspective: 800px;
}
.* {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1s;
}
.*Child {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid yellow;
color: #fff;
&.activeChild {
border: 1px solid red !important;
}
& img {
width: 100%;
height: 100%;
}
:hover {
cursor: grab;
}
:active {
cursor: grabbing;
}
}
</style>
The above is the detailed content of the ready-to-use vue carousel component demo. For more information about vue carousel components, please pay attention to my other related articles!