vue3 卡片走马灯

在Vue3中，实现卡片走马灯的方法如下所示：
<template>
<el-carousel type="card" height="200px" :interval="2000" arrow="always">
<el-carousel-item v-for="item in imgList" :key="item.name">
<img :src="item.src" style="height:100%;width:100%;" :title="item.title" />
</el-carousel-item>
</el-carousel>
</template>

<script>
export default {
data() {
return {
imgList: [
{ name: "image1", src: "image1.jpg", title: "Image 1" },
{ name: "image2", src: "image2.jpg", title: "Image 2" },
{ name: "image3", src: "image3.jpg", title: "Image 3" },
],
};
},
};
</script>

<style scoped>
.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;
}
</style>