相信很多人在做官网首页的时候，都会遇到过这样一种情况。那就是在做新闻中心时，会有一个图文一起轮播
的一个步骤。

如果是单独的轮播，ele可以简单快速的实现。但是要做的图片和自己所写的文案做到保持一致，并且自己的文案要在
轮播的外部，基本上与轮播没什么关联。这样的话可能实现起来就不是那么容易了。

这是我所看到的原创作者的分享：
https://blog.csdn.net/m0_49078080/article/details/108683333

第一步，先写一个div装轮播，另一个装自己写的文案

  <div class="press-center">
        <h1>新闻中心</h1>
        <section>
          <el-carousel height="450px" ref="carousel" @change="carousel">
            <el-carousel-item v-for="item in carouseData" :key="item.id">
              <h3 class="small">
                <img :src="item.url" alt="" />
              </h3>
            </el-carousel-item>
          </el-carousel>
        </section>
        <div>
         <section
            v-for="(item, index) in selectData"
            :key="index"
            @click="controlSwiper(item.id, index)"
        >
         <p :class="{ active: active == item.id }">{{ item.title }}</p>
         <span></span>
         <i>{{ item.font }}</i>
         <font>{{ item.data }}</font>
        </section>
       </div>
  </div>

第二步，创建active，carouseData，selectData参数，carousel与controlSwiper方法

export default{
    data() {
    return {
      bannerheight: "",
      active: 0,
      selectData: [
        {
          url: require("../assets/solution1.jpg"),
          title: "我是标题我是标题我是标题我是标题111111111”",
          font: "已阅读36次",
          data: "时间：2021-04-19",
          id: 0,
        },
        {
          url: require("../assets/solution2.jpg"),
          title: "我是标题我是标题我是标题我是标题222222222",
          font: "已阅读36次",
          data: "时间：2021-04-19",
          id: 1,
        },
        {
          url: require("../assets/solution3.jpg"),
          title: "我是标题我是标题我是标题我是标题333333333",
          font: "已阅读36次",
          data: "时间：2021-04-19",
          id: 2,
        },
        {
          url: require("../assets/solution4.jpg"),
          title: "我是标题我是标题我是标题我是标题444444444",
          font: "已阅读36次",
          data: "时间：2021-04-19",
          id: 3,
        },
      ],
      carouseData: [
        { url: require("../assets/solution1.jpg") },
        { url: require("../assets/solution2.jpg") },
        { url: require("../assets/solution3.jpg") },
        { url: require("../assets/solution4.jpg") },
      ],
    };
  },
  methods: {
      controlSwiper(id, index) {
        this.active = id;
        this.$refs.carousel.setActiveItem(index);    // 注：这一句是方法成功的关键，别玩了在轮播图上加上ref=“carousel”
      },
      carousel(e) {
        this.active = e;
      },
    },
}

第三步，设置样式（这里大家可以根据自己的设计稿来）

<style lang="scss" scoped>
.press-center {
position: relative;
  height: 580px;
  margin-bottom: 120px;
  h1 {
    text-align: center;
    margin: 80px 0;
    color: #333;
  }
  .active {
    border-bottom: 2px solid #39ae9c;
  }
  > section {
    width: 45%;
    height: 450px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  > div {
    height: 450px;
    position: absolute;
    right: 0;
    top: 20%;
    width: 50%;
    section {
      position: relative;
      height: 25%;
      p {
        position: absolute;
        font-size: 24px;
        top: 8%;
        left: 6%;
      }
      p:hover{
        cursor: pointer;
      }
      span {
        padding: 16px 3px;
        background: #39ae9c;
        position: absolute;
        top: 26%;
      }
      font {
        position: absolute;
        left: 6%;
        bottom: 16%;
        color: #666;
      }
      i {
        color: #666;
        position: absolute;
        right: 2%;
        bottom: 16%;
      }
    }
  }
}
</style>

以上就是element ui 跑马灯实现图文一起轮播的方法了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~