carousel怎么设置轮播图图片
时间: 2024-06-09 17:11:29 浏览: 151
使用carousel组件可以很方便地创建轮播图。在设置轮播图图片时,你需要为carousel组件提供一个图片列表,然后carousel会自动将这些图片进行轮播。
以下是一个基本的carousel组件,其中图片列表为`imgList`:
```
<template>
<div>
<el-carousel :interval="5000" arrow="always">
<el-carousel-item v-for="(item, index) in imgList" :key="index">
<img :src="item">
</el-carousel-item>
</el-carousel>
</div>
</template>
<script>
export default {
data() {
return {
imgList: [
'https://example.com/image1.jpg',
'https://example.com/image2.jpg',
'https://example.com/image3.jpg'
]
}
}
}
</script>
```
以上代码将创建一个carousel组件,其中包含三张图片。你可以根据自己的需求修改`imgList`的内容,以显示不同的图片。此外,你还可以通过调整`interval`属性来设置图片轮播的时间间隔,以及通过`arrow`属性来设置轮播图的箭头显示方式。
阅读全文