vue中elementui的el-carousel走马灯轮播图片

轮播图片

放在<template中

// interval可以调节轮播时间
<el-card>
	 <el-carousel :interval="2000" type="card" height="250px">
	    <el-carousel-item v-for="item in imgList" :key="item">
	        <img :src="item.img" style="height:100%;width:100%;">
	    </el-carousel-item>
	 </el-carousel>
 </el-card>

放在<script的data部分

// 具体路劲根据自己的情况而定
// 如果实在不知道可以去上面这样试<img src="../a">
imgList: [
        {img: require('../assets/skin-blue.jpg')},
        {img: require('../assets/skin-chrome.jpg')},
        {img: require('../assets/skin-city.jpg')},
        {img: require('../assets/skin-cloth.jpg')},
        {img: require('../assets/skin-kiwi.jpg')},
        {img: require('../assets/skin-greenish.jpg')},
        {img: require('../assets/skin-lights.jpg')}
      ],

在<style中

.el-carousel__item img {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

效果：