vue3项目之el-carousel 轮播图的使用

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);
    }
}