el-carousel 轮播图的使用
官网:https://element-plus.gitee.io/zh-CN/component/carousel.html
在这里定义一个卡片式的轮播图
<el-carousel
v-if="roomDetail.imgs && roomDetail.imgs.length > 0"
class="imgs-wall"
height="350px"
trigger="click"
:interval="5000"
indicator-position="none"
type="card"
>
<el-carousel-item v-for="(item, index) in roomDetail.imgs" :key="index">
<img v-lazy="item" />
</el-carousel-item>
</el-carousel>
几个注意的点:
height
:高度必须在这里定义!就是整个控制整个轮播图的高度innterval
:自动切换时间indicator-position
:设置下方指示器是否显示trigger
:切换方式
还需要修改一下样式:
// 整个轮播图样式 宽度默认为 100%
.imgs-wall {
width: 1200px;
padding: 50px 0px;
// 居中显示
margin: 0 auto;
// 图片样式固定模板
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
}
// 卡片样式
.el-carousel__item--card {
border: 8px solid #fff;
border-radius: 6px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
}
}