vue elementUI 幻灯片, 轮播图简单实例
这里是针对的宽屏图片,所以采用的是背景图片居中, 如果是一般的图片, 可以直接img + src属性就OK了
1. 在vue组件文件中
<template> <div class="home"> <el-carousel :interval="5000" height="478px" arrow="always"> <el-carousel-item v-for="item in imgs" :key="item" :style="'background:url('+item+') no-repeat center'"> </el-carousel-item> </el-carousel> </div> </template>
2, js内容
export default { name: 'Home', data(){ return { imgs:[ require("../assets/images/slide01.jpg"), require("../assets/images/slide02.jpg"), require("../assets/images/slide03.jpg") //注意: 这里一定 require, 不能直接写地址 ] } } }
3, 效果如下: