vue+element-ui carousel走马灯一次轮播(显示)指定张数图片

本文介绍: vue+element–ui carousel 走马灯一次轮播(显示)指定张数图片

html：

  &lt;el-carousel :loop="false" :autoplay="false" height="250px" width='500px' style="margin-top:200px"&gt;
    &lt;el-carousel-item class="el-car-item" v-for="(list, index) in dataList" :key="index"&gt;
       <img v-for="(imgList,index2) in list" :key="index2" class="top-img" :src="imgList.img" :alt="imgList.title" /&gt;
    </el-carousel-item&gt;
  </el-carousel&gt;

模拟数据：

dataList: [
        {
          "img": "https://img2.baidu.com/it/u=1415816293,2911087723&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=500&amp;h=338"
        },
        {
          "img": "https://img.mp.itc.cn/upload/20170612/72d37f9f668549839d8cdb5d787f7ec3_th.jpg"
        },
        {
          "img": "https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2022%2F0509%2F0a525bbaj00rblcqi003lc000p000iwm.jpg&amp;thumbnail=660x2147483647&amp;quality=80&amp;type=jpg"
        },
        {
          "img": "https://img2.baidu.com/it/u=4213943477,3171054669&amp;fm=253&fmt=auto&app=138&f=JPEG?w=500&h=588"
        },
        {
          "img": "https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
        },
        {
          "img": "https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
        },
      ],

js 实现

  getDataSource() {
    let newDataList = []
    let current = 0
    if(this.dataList && this.dataList.length>0){
      for(let i=0;i<=this.dataList.length-1;i++){
        if(i%4 !== 0 || i === 0 ){
          if(!newDataList[current]){
            newDataList.push([this.dataList[i]])
          }else{
            newDataList[current].push(this.dataList[i])
          }
        }else{
          current++
          newDataList.push([this.dataList[i]])
        }
      }
    }
    this.dataList = [...newDataList]
    },