如何实现element-ui走马灯多张图片加文字轮播
时间: 2023-12-17 07:21:36 浏览: 221
解决Vue的项目使用Element ui 走马灯无法实现的问题
5星 · 资源好评率100%
您可以使用`<el-carousel>`元素来实现element-ui走马灯多张图片加文字轮播。以下是一个基本的示例代码:
```html
<template>
<el-carousel :interval="4000">
<el-carousel-item v-for="(item, index) in items" :key="index">
<img :src="item.src" alt="image">
<div class="carousel-text">{{ item.text }}</div>
</el-carousel-item>
</el-carousel>
</template>
<script>
export default {
data() {
return {
items: [
{
src: 'https://picsum.photos/800/400/?image=11',
text: 'First slide'
},
{
src: 'https://picsum.photos/800/400/?image=12',
text: 'Second slide'
},
{
src: 'https://picsum.photos/800/400/?image=13',
text: 'Third slide'
}
]
}
}
}
</script>
<style>
.carousel-text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
font-size: 20px;
text-align: center;
}
</style>
```
在这个示例中,我们使用`<el-carousel>`元素来包含一个或多个`<el-carousel-item>`元素。`<el-carousel-item>`可以包含一张图片和一段文字。`interval`属性指定了轮播的间隔时间(单位为毫秒),默认值为3000。
为了让文字能够叠加在图片上面,我们使用了CSS中的`position`属性来将文字定位到图片的底部。我们还使用了`background-color`属性来给文字添加一个半透明的黑色背景色,以便更好地展示文字内容。
阅读全文