先附上效果圖：
??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')},
]
}
},這里我使用的是靜態(tài)圖片(本地）
經(jīng)驗分享：
在制作輪播圖的時候經(jīng)常會發(fā)現(xiàn)圖片大小不一，這時候可以在img標簽里加上width：100%；height：100%即可實現(xiàn)圖片鋪滿。
當然，這只是輪播圖的一種，還有其他的各種樣式可以去element ui官網(wǎng)研究。文章來源：http://www.zghlxwxcb.cn/news/detail-511513.html
此篇博客是新手經(jīng)驗分享，本人前端菜鳥一枚....文章來源地址http://www.zghlxwxcb.cn/news/detail-511513.html
到了這里，關于制作輪播圖經(jīng)驗分享——element ui走馬燈的使用（附源碼，效果截圖）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
