官网例子
这里我们拿官网的例子作为讲解
链接: 官网.
代码
<template>
<el-carousel :interval="4000" type="card" height="200px">
<!--此处注意,v-for 是一个固定的数,要想显示图片,我们就应该让item循环一个ImageList -->
<el-carousel-item v-for="item in 6" :key="item">
<h3 class="medium">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>
<style>
.el-carousel__item h3 {
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;
}
</style>
改造适用
从官网中我们可知,要想显示图片,item循环的List中就必须要是个图片的List。因此我们在data中定义一个图片的List集合(后台传同理)。
<template>
<div class="index">
<!-- 跑马灯 -->
<div>
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item v-for="item in imgList" :key="item.id">
<img :src="item.idView" class="image">
</el-carousel-item>
</el-carousel>
</div>
</div>
</template>
<script>
export default {
name: 'index',
data(){
return {
imgList: [
{id:0,idView:'./static/image/monster/dog.jpg'},
{id:1,idView:'./static/image/monster/lion.jpg'},
{id:2,idView:'./static/image/monster/snake.jpg'},
{id:3,idView:'./static/image/monster/tree.jpg'}
]
};
},
methods: {
}
}
</script>
<style>
.index{
background: #c8cfd8;
width: 80%;
text-align: center;
margin-left: 142px;
width: 80.6%;
}
.el-carousel__item h3 {
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;
}
</style>
注意:
//image中的url,当为当前项目的静态文件时,在本项目下的静态图片。
{id:0,idView:'./static/image/monster/dog.jpg'},
//为动态路径时
{id:0,idView:require("@/assets/images/fk.jpg")},
注意:跑马灯的图片尽量尺寸一致,可以通过工具将图片缩放至同一尺寸。