【Vue】10行代码ElementUI实现轮播图---20230111

ElementUI轮播图用10行代码就能解决

链接https://element.eleme.cn/#/zh-CN/component/carousel

main.js全局引用ElementUI

//引入ElementUI组件库
import ElementUI from 'element-ui';
//引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css';
//使用ElementUI
Vue.use(ElementUI)

ListContainer/index.vue引用【Carousel 走马灯】

<!--banner轮播-->
 <div class="block">
       <el-carousel height="455px">
       <el-carousel-item v-for="(carousel,index) in bannerList" :key="carousel.id">
            <img style="width:100%" :src="carousel.imgUrl" />
       </el-carousel-item>
       </el-carousel>
 </div>