vue3实现轮播图,每次两个

显示效果:

代码实现:

 

<template>
  <el-carousel :loop="false" :autoplay="false" height="600px">
    <el-carousel-item
      class="el-car-item"
      v-for="(list, index) in dataList"
      :key="index"
    >
      <img
        v-for="(imgList, index2) in list"
        :key="index2"
        class="top-img"
        :src="imgList.img"
        :alt="imgList.title"
      />
    </el-carousel-item>
  </el-carousel>
</template>

<script setup>
import { ref } from "vue";
import imgurl from "../../assets/1.jpg";
import imgurl2 from "../../assets/3.jpg";
let dataList = ref([
  {
    title: "111",
    img: imgurl,
  },
  {
    title: "222",
    img: imgurl2,
  },
  {
    title: "333",
    img: imgurl2,
  },
  {
    title: "444",
    img: imgurl2,
  },
  {
    title: "555",
    img: imgurl,
  },
  {
    title: "666",
    img: imgurl,
  },
]);

let newDataList = ref([]);
let current = 0;
if (dataList.value && dataList.value.length > 0) {
  for (let i = 0; i <= dataList.value.length - 1; i++) {
    if (i % 2 !== 0 || i === 0) {
      if (!newDataList.value[current]) {
        newDataList.value.push([dataList.value[i]]);
      } else {
        console.log(newDataList.value[0]);
        newDataList.value[current].push(dataList.value[i]);
      }
    } else {
      current++;
      newDataList.value.push([dataList.value[i]]);
    }
  }
}
dataList.value = [...newDataList.value];
</script>

<style scoped>
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-carousel__item {
  display: flex;
  justify-content: space-between;
}
.el-carousel__item img {
  width: 49%;
}
</style>