先附上效果图：
element ui链接地址：Carousel 走马灯 | Element Plus (gitee.io)
源码：
<div style="height: 30vw;margin-top: 80px">
<el-carousel :interval="4000" type="card" height="25vw">
<el-carousel-item v-for="(item, index) in urls" :key="index">
<img v-bind:src="item.url" style="width: 100%;height: 100%">
</el-carousel-item>
</el-carousel>
</div>
data() {
return {
urls:[
{url:require('../assets/jmsg.jpg')},
{url:require('../assets/sdkj.jpg')},
{url:require('../assets/ylylbs.jpg')},
{url:require('../assets/syzz.jpg')},
{url:require('../assets/gc.jpg')},
]
}
},这里我使用的是静态图片(本地）
经验分享：
在制作轮播图的时候经常会发现图片大小不一，这时候可以在img标签里加上width：100%；height：100%即可实现图片铺满。
当然，这只是轮播图的一种，还有其他的各种样式可以去element ui官网研究。文章来源：https://www.toymoban.com/news/detail-511513.html
此篇博客是新手经验分享，本人前端菜鸟一枚....文章来源地址https://www.toymoban.com/news/detail-511513.html
到了这里，关于制作轮播图经验分享——element ui走马灯的使用（附源码，效果截图）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
