vue elementUI 走马灯 轮播图简单实例

根据elementui官网的介绍，（官网链接:elementUI官网），举其中的一个例子如下，

<template>
  <el-carousel :interval="5000" arrow="always">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

根据上面的例子做出修改，引入imges，轮播图片，效果如下：

 

代码如下：

<template>
    <div>
      <el-carousel indicator-position="outside" height="200px" >
        <el-carousel-item v-for="item in imges" :key="item">
          <img :src="item.url">
        </el-carousel-item>
      </el-carousel>
    </div>
</template>

<script>
    export default {
        name: "zouma",
      data () {
        return {
          imges: [
            {url: require("../assets/zoumaimges/1.png")},
            {url: require("../assets/zoumaimges/2.png")},
            {url: require("../assets/zoumaimges/3.png")},
            {url: require("../assets/zoumaimges/4.png")},
            {url: require("../assets/zoumaimges/5.png")},
          ]
        }
      }
    }
</script>

<style scoped>

</style>

 注意走马灯大小，根据图片，设置其高度及宽度。