制作轮播图经验分享——element ui走马灯的使用（附源码，效果截图）

先附上效果图：

  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官网研究。

此篇博客是新手经验分享，本人前端菜鸟一枚....