在用户端前台，需要展示图片轮播效果。这里就需要使用到element-ui的走马灯组件效果。具体实现如下

    引入element-ui依赖

    1. import ElementUI from 'element-ui';
    2. import 'element-ui/lib/theme-chalk/index.css';
    4. Vue.use(ElementUI);

    创建页面，实现走马灯组件，并添加相关数据。

    1.  <el-carousel indicator-position="outside">
    2.       <el-carousel-item v-for="(img,index) in  images" :key="index">
    3.         <img :src="img.url" alt="无图片"/>
    4.       </el-carousel-item>
    5.     </el-carousel>
    1.  data() {
    2.     return {
    3.       images:[
    4.         { url: require("@/assets/images/web-banner1.png")},
    5.         { url: require("@/assets/images/web-banner2.jpg")},
    6.         { url: require("@/assets/images/web-banner3.png")},
    7.         { url: require("@/assets/images/web-banner4.jpg")}
    8.       ]
    9.     }
    10.   },

    来一起看看效果吧
    image.png
    更多用法参考element-ui文档。