element ui 跑马灯实现图文一起轮播

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

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

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

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

  

        
新闻中心
        

          
            
              

                
              
            
          
        
        

         

         
{{ item.title }}
         
         {{ item.font }}
         {{ item.data }}
        
       
  

第二步，创建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;
      },
    },
}

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

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