如何通过Element-UI的Carousel组件写首页轮播图

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

---

一、如何通过Element-UI的Carousel组件写首页轮播图？

使用Element-UI的Carousel组件写首页轮播图,通过css样式改变轮播图的指示灯和箭头的样式。

二、使用步骤

1.HTML代码部分

代码如下（示例）：

 <el-carousel class="custom-carousel" arrow="always">
        <el-carousel-item
          v-for="(item, index) in picsA"
          :key="index"
          class="custom-carousel-item"
        >
          <img class="carousel-img" :src="item.url" />
        </el-carousel-item>
 </el-carousel>

2.js部分代码

代码如下（示例）：

data() {
    return {
      picsA: [],
      smallSpecImages: ["./../../assets/image/jianto.png"],
    };
  },

该处使用的url网络请求的数据。

3.css部分代码

//设置轮播图底部按钮
 ::v-deep .el-carousel__indicator--horizontal .el-carousel__button {
    width: 14px;
    height: 14px;
    background: #ffffff;
    border: 1px solid #ffffff;
    //设置圆角边框
    border-radius: 50%;
    //设置透明度
    opacity: 0.4;
  }

  ::v-deep .el-carousel__indicator--horizontal.is-active .el-carousel__button {
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 1;
  }

  .custom-carousel {
    //设置宽高比
    aspect-ratio: 16 / 9;

    .custom-carousel-item {

      ::v-deep .line {
        display: inline-block;
        height: 22px;
        width: 1px;
      }
      //设置轮播图上文字的位置
      .cci-desc-left {
        position: absolute;
        bottom: 353px;
        left: 160px;
        //z-index值较大的元素将叠加在z-index值较小的元素之上
        z-index: 20;
        font-size: 40px;
        font-weight: 500;
        color: #ffffff;
        //设置文字阴影
        text-shadow: 0px 2px 4px rgba(90, 90, 90, 0.7);
      }

      .cci-desc-right {
        position: absolute;
        bottom: 298px;
        left: 142px;
        z-index: 20;
        font-size: 26px;
        font-weight: 500;
        color: #ffffff;
        line-height: 36px;
        text-align: center;
        text-shadow: 0px 2px 4px rgba(90, 90, 90, 0.7);
.carousel-img {
    width: 100%;
    height: 100%;
  }

  ::v-deep .el-carousel__container {
    width: 100%;
    height: 100%;
  }

  ::v-deep .el-carousel__arrow {
    width: 70px;
    height: 70px;
    background-color: initial;

    i {
      display: none;
      font-size: 70px;
    }
    // background-color: antiquewhite;
  }
  //设置箭头图片
  ::v-deep .el-carousel__arrow--left {
    position: fixed;
    background: url("../../assets/image/jianto.png") no-repeat center center;
    background-size: auto 40px;
  }

  ::v-deep .el-carousel__arrow--right {
    position: fixed;
    background: url("../../assets/image/2.png") no-repeat center center;
    background-size: auto 40px;
  }
  //修改指示灯样式
  ::v-deep .el-carousel__indicators--horizontal {
    position: fixed;
    transform: translate(-50%, -50%);
    bottom: 24px;
  }
  ::v-deep .el-carousel__indicators--horizontal {
    bottom: calc(100vh - 50px);
    position: fixed;
    bottom: 0;
  }

1、需要改变vue自带的样式时需要在元素前面加上::v-deep；
2、文字阴影—text-shadow 的基本语法：
text-shadow ： none | none | [, ] * 或none | [, ]*
也就是：
text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]…
或者
text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]…

---

实现效果

组件的原始样式：