实现带可点击指示器的无限滚动轮播组件的问题求助

核心思路是指示器始终基于原卡片数量逻辑，克隆元素只做视觉过渡，不参与指示器的索引计算，通过滚动位置映射和跳转修正来实现点击指示器后的正确滚动，同时保持无限滚动的流畅性。

完整实现示例 #

<div class="carousel-container">
  <div class="carousel-track" id="carouselTrack">
    <!-- 原卡片会在这里动态生成，克隆元素也会插入到前后 -->
  </div>
</div>
<div class="carousel-indicators" id="carouselIndicators"></div>

.carousel-container {
  overflow: hidden;
  width: 80%;
  margin: 0 auto;
}

.carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  /* 隐藏滚动条 */
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-card {
  flex: 0 0 300px;
  height: 200px;
  background: #f0f0f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.indicator-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: background 0.3s;
}

.indicator-dot.active {
  background: #333;
}

const track = document.getElementById('carouselTrack');
const indicatorsContainer = document.getElementById('carouselIndicators');

// 原卡片数据（这里用示例数据，实际替换成你的内容）
const originalCards = [1, 2, 3, 4, 5];
const cardWidth = 300 + 16; // 卡片宽度 + gap值
let currentIndex = 0;

// 初始化：生成原卡片 + 克隆首尾卡片实现无限滚动
function initCarousel() {
  // 生成原卡片
  originalCards.forEach((item, idx) => {
    const card = document.createElement('div');
    card.className = 'carousel-card';
    card.textContent = `Card ${item}`;
    track.appendChild(card);
  });

  // 克隆最后1张卡片到开头（如果一次显示多张，就克隆对应数量）
  const lastCard = track.querySelector('.carousel-card:last-child');
  track.insertBefore(lastCard.cloneNode(true), track.firstChild);

  // 克隆最前1张卡片到结尾
  const firstCard = track.querySelector('.carousel-card:nth-child(2)');
  track.appendChild(firstCard.cloneNode(true));

  // 初始滚动到原第一张卡片位置（跳过开头的克隆卡片）
  track.scrollTo({ left: cardWidth, behavior: 'instant' });

  // 生成指示器
  generateIndicators();

  // 监听滚动事件
  track.addEventListener('scroll', handleScroll);
}

// 生成指示器圆点
function generateIndicators() {
  originalCards.forEach((_, idx) => {
    const dot = document.createElement('div');
    dot.className = 'indicator-dot';
    if (idx === 0) dot.classList.add('active');
    dot.addEventListener('click', () => goToIndex(idx));
    indicatorsContainer.appendChild(dot);
  });
}

// 点击指示器跳转到对应卡片
function goToIndex(targetIndex) {
  // 计算目标滚动位置：原卡片起始位置 + 目标索引*单张宽度
  const targetScrollLeft = cardWidth + (targetIndex * cardWidth);
  
  track.scrollTo({ left: targetScrollLeft, behavior: 'smooth' });
  currentIndex = targetIndex;
  updateIndicators();
}

// 更新指示器激活状态
function updateIndicators() {
  document.querySelectorAll('.indicator-dot').forEach((dot, idx) => {
    dot.classList.toggle('active', idx === currentIndex);
  });
}

// 处理滚动事件，实现无限滚动和指示器同步
function handleScroll() {
  const scrollLeft = track.scrollLeft;

  // 滚动到结尾的克隆卡片区域，跳转到原第一张位置
  if (scrollLeft >= track.scrollWidth - cardWidth * 2) {
    track.scrollTo({ left: cardWidth, behavior: 'instant' });
    currentIndex = 0;
  }
  // 滚动到开头的克隆卡片区域，跳转到原最后一张位置
  else if (scrollLeft <= 0) {
    track.scrollTo({ left: cardWidth * originalCards.length, behavior: 'instant' });
    currentIndex = originalCards.length - 1;
  }
  // 正常滚动区域，计算当前显示的卡片索引
  else {
    currentIndex = Math.round((scrollLeft - cardWidth) / cardWidth);
  }

  updateIndicators();
}

// 启动轮播
initCarousel();

关键逻辑解释 #

1. 克隆元素的作用：首尾各克隆1张卡片（如果一次显示多张，就克隆对应数量），让滚动到边界时能有自然过渡效果，之后通过瞬间跳转回到原卡片区域，实现无限滚动的视觉体验。
2. 指示器与原卡片绑定：不管克隆多少元素，指示器数量始终等于原卡片数，点击时直接计算原卡片的滚动位置（跳过开头的克隆元素）。
3. 滚动位置修正：当滚动到克隆元素区域时，用behavior: 'instant'瞬间跳转到对应的原卡片位置，用户不会察觉到跳转，同时同步指示器的激活状态。
4. 索引计算：正常滚动时，通过(scrollLeft - cardWidth) / cardWidth得到原卡片的索引，因为初始滚动位置已经跳过了开头的克隆元素。

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