页面展示如图所示

WechatIMG91.jpeg

以下是vue中的布局

WechatIMG5.jpeg

以下是修改element ui指示器的样式
1、修改指示器样式
.el-carousel {
width: 500px;

        /deep/ .el-carousel__indicators {
            // 指示器
            /* left: unset; */
            left: 0;
            transform: unset;
            right: 2%;
            bottom: 20%;
            z-index: 99;
            margin: 0 16px;
            width: calc(100% - 32px);
        }

        /deep/ .el-carousel__button {
            // 指示器按钮
            width: 16px;
            height: 2px;
            background-color: rgba(0, 0, 0, 0.3);
        }

        /deep/ .is-active .el-carousel__button {
            // 指示器激活按钮
            background: #5E65EF;
        }
    }

以下是获取当前切换图片的索引 index

WechatIMG6.jpeg

以下是给当前显示图片的索引设置一个默认值

WechatIMG7.jpeg

以下是联动效果，上面显示当前图片时，下面会显示对应的内容

WechatIMG8.jpeg