Vue3 + Element-plus 实现走马灯（轮播图）

Vue3 + Element-plus 实现走马灯（轮播图）

首先去官网上选择一个你喜欢的走马灯效果图的代码，我选择的是这个

<template><el-carousel:interval="4000"type="card"height="200px"><el-carousel-itemv-for="item in 6":key="item"><h3text="2xl"justify="center">{{ item }}</h3></el-carousel-item></el-carousel></template>

删除/替换这行代码

<!--删除改行的代码--><h3text="2xl"justify="center">{{ item }}</h3><!--替换成以下的代码--><img:src="item.url"alt=""/>

<script>标签

图片的数据区

<script setup>const carouseData =[{url:require("@/assets/index/001.png")},{url:require("@/assets/index/002.png")},{url:require("@/assets/index/003.png")},{url:require("@/assets/index/004.png")},{url:require("@/assets/index/005.png")},{url:require("@/assets/index/006.png")},]</script>

完整代码如下（可直接使用）

<template><el-carousel:interval="4000"type="card"height="300px"><el-carousel-itemv-for="item in carouseData":key="item"><img:src="item.url"alt=""/></el-carousel-item></el-carousel></template><scriptsetup>const carouseData =[{url:require("@/assets/index/001.png")},{url:require("@/assets/index/002.png")},{url:require("@/assets/index/003.png")},{url:require("@/assets/index/004.png")},{url:require("@/assets/index/005.png")},{url:require("@/assets/index/006.png")},]</script>

实现的效果图如下