Vue中使用el-carousel一次轮播多张图片

最新推荐文章于 2025-06-16 17:12:03 发布

原创最新推荐文章于 2025-06-16 17:12:03 发布 · 522 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

ElementUI 专栏收录该内容

20 篇文章

订阅专栏

如下图是有ElementUI的走马灯组件，实现一次轮播多张图片

在这里插入图片描述

核心思想： 就是把后端返回的数据如：[1,2,3,4,5,6,7,8,9,10,11]，组装成二维数组[[1,2,3,4,5],[6,7,8,9,10],[11]]，外层循环渲染el-carousel-item，内层循环渲染真实的卡片条目

数据处理

/**后端数据 */
const data = res?.data || [];
/**分批次（每批5个）处理成二维数组，实现走马灯轮播 */
const newData = [];
for (let i = 0; i < data.length; i += 5) {
  newData.push(data.slice(i, i + 5));
}
/**最后处理的数据 */
this.carouselList = newData;

模板实现

<el-carousel class="etc-carousel">
  <el-carousel-item
    class="etc-carousel-item"
    v-for="(dataList, carouselIndex) in carouselList"
    :key="carouselIndex"
  >
    <div v-for="data in dataList" :key="data.id" class="etc-item"></div
  ></el-carousel-item>
</el-carousel>

样式处理

<style scoped lang="scss">
.employees-top-card {
  height: 92px;
  .etc-carousel {
    width: 100%;
    height: 100%;
    :deep(.el-carousel__container) {
      width: 100%;
      height: 100%;
    }
    .etc-carousel-item {
      width: 100%;
      height: 100%;
      display: flex !important;
      justify-content: space-between !important;
      gap: 20px;
      .etc-item {
        width: 271px;
        height: 92px;
        flex: none;
        padding: 16px 28px;
      }
    }
  }
}
</style>