Vue.js自定义Carousel组件如何实现同时显示3个幻灯片？

嘿，我来帮你搞定这个同时显示3个幻灯片的需求！原来的组件只通过slideCurrent === index匹配单张幻灯片，我们只需要修改显示判断逻辑，让符合条件的3张幻灯片都能显示出来，具体步骤如下：

1. 父组件新增计算属性，生成可见索引数组 #

首先在父组件的computed里添加一个visibleIndices属性，用来计算当前要显示的3个幻灯片的索引，同时处理循环边界（比如第一张的前一张是最后一张，最后一张的后一张是第一张）：

computed: {
  slidesLen () {
    return this.blocks?.length || 0
  },
  visibleIndices () {
    const indices = []
    // 我们要展示当前slideCurrent的前一个、当前、后一个，共3张
    for (let offset of [-1, 0, 1]) {
      let index = this.slideCurrent + offset
      // 处理负数索引，循环到列表末尾
      if (index < 0) {
        index += this.slidesLen
      }
      // 处理超出长度的索引，循环到列表开头
      if (index >= this.slidesLen) {
        index -= this.slidesLen
      }
      indices.push(index)
    }
    return indices
  }
}

2. 更新父组件中CarouselSlide的传参 #

把原来传给子组件的:slide-current="slideCurrent"换成:visible-indices="visibleIndices"，这样子组件就能拿到需要显示的索引列表：

<CarouselSlide v-for="(block,index) in blocks" :key="index" :index="index" :visible-indices="visibleIndices">

3. 修改子组件的显示判断逻辑 #

更新子组件的props，接收visibleIndices数组，然后把显示条件改成当前索引是否在这个可见数组里：

<template>
  <div v-show="visibleIndices.includes(index)" class="carousel-slide-item">
    <slot />
  </div>
</template>

<script>
export default {
  props: {
    visibleIndices: {
      type: Array,
      default: () => []
    },
    index: {
      type: Number,
      default: 0
    }
  }
}
</script>

4. 调整样式让幻灯片并排显示 #

为了让3张幻灯片横向排列，需要给父容器和子项添加合适的样式：

• 给父组件的carousel-clients-works容器添加flex布局相关样式：

.carousel-clients-works {
  display: flex;
  justify-content: center;
  gap: 1rem; /* 可选，给幻灯片之间加间距 */
  overflow: hidden;
}

• 给子组件的根div设置宽度，确保每个幻灯片占父容器的1/3：

.carousel-slide-item {
  width: calc(100% / 3);
  flex-shrink: 0; /* 防止幻灯片被压缩 */
}

5. 保留原有的切换逻辑 #

原来的prev和next方法完全不用改！因为每次切换slideCurrent后，visibleIndices会自动重新计算对应的3个索引，自然实现轮播切换的效果。

这样修改后，点击prev/next按钮时，就会切换一组3个幻灯片，并且在列表首尾处实现无缝循环显示啦～

内容的提问来源于stack exchange，提问作者Red Fox