多卡片独立Carousel实现异常，寻求极简解决方案

核心思路 #

不用重复编写JS代码，通过遍历每个卡片容器、局部获取内部轮播元素，让每个轮播的状态独立维护，彻底解决全局类名导致的内容串流问题。

具体实现 #

1. 调整HTML结构 #

给每个project-card内部的轮播套一个局部容器，确保轮播元素都是当前卡片的子元素：

<!-- 第一个项目卡片 -->
<div class="project-card">
  <div class="carousel-wrap">
    <div class="slides">轮播内容1</div>
    <div class="slides">轮播内容2</div>
    <button class="carousel-prev">上一张</button>
    <button class="carousel-next">下一张</button>
  </div>
</div>

<!-- 第二个项目卡片 -->
<div class="project-card">
  <div class="carousel-wrap">
    <div class="slides">轮播内容A</div>
    <div class="slides">轮播内容B</div>
    <button class="carousel-prev">上一张</button>
    <button class="carousel-next">下一张</button>
  </div>
</div>

2. 修改JS逻辑 #

遍历所有project-card，对每个卡片单独初始化轮播，所有状态变量都绑定到当前卡片的作用域内：

// 遍历每个项目卡片，批量初始化轮播
document.querySelectorAll('.project-card').forEach(card => {
  // 仅在当前卡片内查找轮播相关元素
  const slides = card.querySelectorAll('.slides');
  const prevBtn = card.querySelector('.carousel-prev');
  const nextBtn = card.querySelector('.carousel-next');
  let currentIndex = 0;

  // 初始化显示第一张轮播
  slides[currentIndex].style.display = 'block';

  // 轮播切换函数
  function switchSlide(targetIndex) {
    // 隐藏当前卡片的所有轮播项
    slides.forEach(item => item.style.display = 'none');
    // 显示目标轮播项
    slides[targetIndex].style.display = 'block';
    currentIndex = targetIndex;
  }

  // 绑定上一张按钮事件
  prevBtn.addEventListener('click', () => {
    const newIndex = currentIndex === 0 ? slides.length - 1 : currentIndex - 1;
    switchSlide(newIndex);
  });

  // 绑定下一张按钮事件
  nextBtn.addEventListener('click', () => {
    const newIndex = currentIndex === slides.length - 1 ? 0 : currentIndex + 1;
    switchSlide(newIndex);
  });
});

方案优势 #

• 所有轮播元素通过card.querySelector局部获取，完全隔离不同卡片的轮播内容
• 每个卡片的轮播状态（currentIndex）、切换逻辑独立存在，不会互相干扰
• 仅需编写一次JS代码，自动适配所有project-card，后续新增卡片无需修改逻辑

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