修改elementui 的el-carousel轮播图样式。自定义样式（轮播图带文字轮播+修改按钮样式）

最新推荐文章于 2025-06-27 17:45:38 发布

原创最新推荐文章于 2025-06-27 17:45:38 发布 · 8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端 #javascript

前端开发专栏收录该内容

601 篇文章

订阅专栏

本文展示了如何使用Vue和Element UI库创建一个带有自定义样式的轮播图组件。代码中详细定义了轮播图的各个部分，包括图片、遮罩层和指示器的样式，并通过数据绑定显示不同的图片和文本。此外，还配置了点击切换和自动播放功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

在这里插入图片描述
代码：

改图标样式：

        <div class="home-middle-top">
          <el-carousel :interval="5000" arrow="always" trigger="click">
            <el-carousel-item v-for="item in imgUrls" :key="item.id">
              <el-row>
                <el-col :span="24" class="banner_img">
                  <img
                    ref="bannerHeight"
                    :src="item.idView"
                    class="bannerImg"
                    @load="imgLoad"
                  />
                  <div class="zhezhao">
                    <p>{{ item.text }}</p>
                  </div>
                </el-col>
              </el-row>
            </el-carousel-item>
          </el-carousel>
        </div>

  data() {
    return {
      showIndex: true,
      bannerHeight: '',
      isChecked: 1,
      lis: ['11', '22'],
      imgUrls: [
        {
          id: 0,
          idView: require('./../../public/static/images/index-banner.jpg'),
          text: '训练1'
        },
        {
          id: 1,
          idView: require('./../../public/static/images/index-banner.png'),
          text: '团队演习'
        },
        {
          id: 3,
          idView: require('./../../public/static/images/bgi.png'),
          text: '团队训练'
        }
      ]
    }
  },


.home-middle-top {
  height: 42%;
  overflow: hidden;
  position: relative;
  /*margin-bottom: 10vh;*/
}

.home-middle-top .el-carousel {
  height: 100%;
}
.home-middle-top .el-carousel >>> .el-carousel__container {
  height: 100%;
}
.home-middle-top .el-carousel >>> .el-carousel__item {
  height: 100%;
}
.home-middle-top .el-carousel >>> .el-carousel__item > .el-row {
  height: 100%;
}
.home-middle-top .el-carousel >>> .el-carousel__item > .el-row > .banner_img {
  height: 100%;
}
/* 轮播图指示标样式 */
.home-middle-top .el-carousel >>> .el-carousel__indicators--horizontal {
  height: 5vh;
  left: 85%;
  bottom: 2vh;
}
.home-middle-top
  .el-carousel
  >>> .el-carousel__indicator--horizontal
  .el-carousel__button {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}

.home-middle-top .el-carousel >>> .is-active .el-carousel__button {
  background: #31e5f5;
  width: 2rem;
  border-radius: 0.5rem;
}
/* end */

.home-middle-bottom {
  height: 52%;
  margin-top: 3%;
}

.home-middle-top img {
  display: block;
  width: 100%;
  height: 100%;
}

.bannerImg {
  height: 100% !important;
  position: relative;
  left: 50%;
  transform: translate(-50%);
}

.banner_img {
  position: relative;
}

.zhezhao p {
  line-height: 1vh;
  color: #fff;
  text-align: left;
  padding-left: 1vw;
}

.zhezhao {
  width: 100%;
  height: 5vh;
  background-color: #000;
  position: absolute;
  bottom: 2vh;
  opacity: 0.5;
  /*z-index: 9999;*/
}

/* 轮播图指示标样式 */
.home-middle-top .el-carousel >>> .el-carousel__indicators--horizontal {
  height: 5vh;
  left: 85%;
  bottom: 2vh;
}
.home-middle-top
  .el-carousel
  >>> .el-carousel__indicator--horizontal
  .el-carousel__button {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}

.home-middle-top .el-carousel >>> .is-active .el-carousel__button {
  background: #31e5f5;
  width: 2rem;
  border-radius: 0.5rem;
}
/* end */