The carousel in vue shows multiple pictures on one screen

1. Structure

 <el-carousel arrow="always" :autoplay="false" indicator-position="none">
          <el-carousel-item v-for="(item, index) in dataList2" :key="index">
            <div class="imgl">
              <div class="imgdet" v-for="(item1, index1) in item" :key="index1" @click="huigu(item1.id)">
                <img :src="item1.cover" alt="" />
                <p class="text">{
    
    {
    
     item1.title }}</p>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>

2. Display different number of sheets on different screens

 var Width = document.body.clientWidth
          console.log(Width)
          if (Width >= 1200) {
    
    
            this.dataList2 = this.formatArray(this.dataList1, 4)
          } else if (768 <= Width < 1200) {
    
    
            this.dataList2 = this.formatArray(this.dataList1, 2)
          }
          if (Width < 768) {
    
    
            console.log(Width)
            this.dataList2 = this.formatArray(this.dataList1, 1)
          }

3. Function

 formatArray(data, num) {
    
    
      var dataList2 = []
      for (var i = 0, len = data.length; i < len; i += num) {
    
    
        dataList2.push(data.slice(i, i + num))
      }
      return dataList2
    },