elementui将轮播修改为需求的样子可点击可自动轮播

本文链接：https://blog.csdn.net/EstherNi/article/details/129181591

该代码示例展示了如何使用Vue.js创建一个轮播图组件，包含图片和底部文本。轮播图的数据绑定于`bannerData`数组，每个项目包含图片地址和文本描述。用户点击底部的圆点可以触发`showstep`方法，改变轮播图的当前显示项。样式定义确保了组件的布局和视觉效果。

摘要由CSDN通过智能技术生成

在这里插入图片描述

 <div class="pic-scroll">
        <el-carousel height="100%" indicator-position="none" ref="toggle" arrow="never">
          <el-carousel-item v-for="(item,index) in bannerData" :key="index">
            <div class="pic-wrap">
              <img class="pic-img" :src="item.img" />
              <div class="pic-bottom">
                <div class="pic-text">{{ item.text }}</div>
                <div class="pic-circle">
                  <div class="pic-circle_item" v-for="(nextLevel, indexLevel) in bannerData.length" :key="indexLevel" :style="{background:index===indexLevel?'#3886FF':'#FFFFFF'}" @click="showstep(indexLevel)"></div>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>

// 轮播
      bannerData: [
        {
          img: require("@/assets/images/login-background.jpg"),
          text: "视频| 奋斗，以生态之名0",
        },
        {
          img: require("@/assets/images/login-background.jpg"),
          text: "视频| 奋斗，以生态之名1",
        },
        {
          img: require("@/assets/images/login-background.jpg"),
          text: "视频| 奋斗，以生态之名2",
        },
        {
          img: require("@/assets/images/login-background.jpg"),
          text: "视频| 奋斗，以生态之名3",
        },
      ],

 // 点击圆点跳转到第几个轮播图
    showstep(ind) {
      this.$refs.toggle.setActiveItem(ind);
    },

.pic-scroll {
      width: 500px;
      height: 100%;
      .el-carousel {
        height: 100%;
        border-radius: 4px;
        .pic-wrap {
          width: 100%;
          height: 100%;
          .pic-img {
            width: 100%;
            height: 100%;
          }
          .pic-bottom {
            width: 100%;
            display: flex;
            position: absolute;
            bottom: 0;
            padding: 20px 10px 20px 20px;
            background: rgba(0, 200, 0, 0.85);
            align-items: center;
            .pic-text {
              width: 70%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #fff;
            }
            .pic-circle {
              display: flex;
              position: absolute;
              right: 0;
              margin-top: 2px;
              margin-right: 10px;
              .pic-circle_item {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                margin-right: 10px;
              }
            }
          }
        }
      }
    }