Vue3-Carousel仅2张幻灯片时循环滚动异常问题求助

这个问题是vue3-carousel组件的已知逻辑缺陷：当仅存在2张幻灯片且开启wrapAround时，组件的循环滚动计算会出现错误，导致只能单向向右滚动。以下是几种可行的解决思路：

1. 复制幻灯片凑数（最简单的临时方案） #

当检测到幻灯片数量为2时，将原数组重复一次，让组件认为有4张幻灯片，这样循环滚动的逻辑就能正常工作。同时保持分页组件的总页数为2，避免分页按钮增多。

修改后的模板代码：

<carousel :settings="settings" ref="carouselRef">
  <slide :key="`${photo}-${index}`" v-for="(photo, index) of getCarouselPhotos()">
    <div class="pic-outer">
      <img
        class="pic"
        :src="photo"
        draggable="false"
      />
    </div>
  </slide>
  <template #addons>
    <pagination
      :style="{ opacity: project.photos.length == 1 ? 0.001 : 1 }"
      :total="project.photos.length"
    />
  </template>
</carousel>

对应的脚本逻辑：

const getCarouselPhotos = () => {
  const photos = project.photos;
  return photos.length === 2 ? [...photos, ...photos] : photos;
};

const settings = {
  itemsToShow: 1,
  itemsToScroll: 1,
  wrapAround: true,
};

注意这里slide的key要改成${photo}-${index}，避免重复key导致的渲染异常。

2. 手动控制滚动逻辑 #

通过组件的ref获取实例，自定义上一页/下一页的点击事件，当幻灯片数量为2时，直接切换到目标页码，绕过组件自带的有问题的滚动逻辑。

模板代码（替换默认导航）：

<carousel :settings="settings" ref="carouselRef">
  <slide :key="index" v-for="(photo, index) of project.photos">
    <div class="pic-outer">
      <img
        class="pic"
        :src="photo"
        draggable="false"
      />
    </div>
  </slide>
  <template #addons>
    <button class="carousel-prev" @click="handlePrev">←</button>
    <pagination
      :style="{ opacity: project.photos.length == 1 ? 0.001 : 1 }"
    />
    <button class="carousel-next" @click="handleNext">→</button>
  </template>
</carousel>

脚本逻辑：

const carouselRef = ref(null);

const handlePrev = () => {
  const photoCount = project.photos.length;
  if (photoCount === 2) {
    const current = carouselRef.value.currentPage;
    carouselRef.value.goToPage(current === 0 ? 1 : 0);
  } else {
    carouselRef.value.prev();
  }
};

const handleNext = () => {
  const photoCount = project.photos.length;
  if (photoCount === 2) {
    const current = carouselRef.value.currentPage;
    carouselRef.value.goToPage(current === 1 ? 0 : 1);
  } else {
    carouselRef.value.next();
  }
};

const settings = {
  itemsToShow: 1,
  itemsToScroll: 1,
  wrapAround: true,
};

3. 升级组件版本 #

检查vue3-carousel的最新版本，部分后续发布的版本可能已经修复了这个2张幻灯片循环滚动的bug。可以尝试更新依赖：

npm update vue3-carousel
# 或者
yarn upgrade vue3-carousel

内容的提问来源于stack exchange，提问作者Josh Halpern