Element-UI 轮播图（走马灯）指示器设为图片

前端@一路前行

已于 2024-07-15 18:48:05 修改

阅读量409

点赞数 2

文章标签： javascript 开发语言 ecmascript

于 2024-07-15 18:42:28 首次发布

本文链接：https://blog.csdn.net/m0_46796399/article/details/140446160

版权

js代码：

// 初始化banenr指示器为图片【初始化执行一次即可】
initBannerPointerBgImg() {
    // 获取所有指示器元素
    let allPointerDomList = document.querySelectorAll('.el-carousel__indicator'); 

    // 为每项指示器元素-添加对应的图片
    allPointerDomList.forEach((item, index) => {
        item.style.backgroundImage = 'url(' + this.devImgPathPrefoxLook + this.bannerList[index].banner_url + ')';
    })
}

css样式：

::v-deep {
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }

    .el-carousel__indicator {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .el-carousel__indicators--horizontal {
        text-align: center;
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .el-carousel {
        height: 100%;

        .el-carousel__indicators--horizontal {
            text-align: center;
            position: absolute;
            bottom: 0px;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            padding: 0px;
            display: flex;
            align-items: center;
            justify-content: center;

            .el-carousel__indicator {
                width: 120px;
                height: 60px;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
                border: 1px solid #dfdada;
                margin-left: 10px;
            }

            .el-carousel__indicator.is-active {
                width: 120px;
                height: 65px;
            }
        }
    }

}

最终效果：