如何创建动态图片源的Bootstrap Carousel并解决轮播不滑动问题

• 所有轮播项都被添加了active类：Bootstrap轮播组件的规则是仅第一个轮播项需要携带active类作为初始展示项，你在遍历files数组时给所有生成的carousel-item都加了active，会导致所有图片同时堆叠在视口内，无法触发滑动切换逻辑。
• 轮播指示器硬编码为固定3个：如果你的files数组长度不等于3，会出现指示器数量和实际轮播项数量不匹配的问题，也会引发交互异常。

将carousel-inner的遍历逻辑修改为仅给下标为0的轮播项添加active类，同时建议将轮播指示器也修改为动态生成，适配任意长度的files数组，完整修复代码如下：

<div id="carouselExampleIndicators" className="carousel slide" data-bs-ride="carousel">
  {/* 动态生成轮播指示器 */}
  <div className="carousel-indicators">
    {files.map((_, index) => (
      <button 
        key={index}
        type="button" 
        data-bs-target="#carouselExampleIndicators" 
        data-bs-slide-to={index} 
        className={index === 0 ? "active" : ""} 
        aria-current={index === 0 ? "true" : undefined}
        aria-label={`Slide ${index + 1}`}
      ></button>
    ))}
  </div>

  <div className="carousel-inner">
    {files.map((eachFile, index) => {
      return (
        // 仅第一个轮播项添加active类
        <div key={eachFile} className={`carousel-item ${index === 0 ? "active" : ""}`}>
          <img 
            src={`/products/galleryimages/${product._id}/${eachFile}`} 
            className="d-block img-fluid w-100" 
            style={{height:"200px",width:"350px",objectFit:"cover"}} 
            alt="产品展示图"
          />
        </div>
      )
    })}
  </div>

  <button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span className="carousel-control-prev-icon" aria-hidden="true"></span>
    <span className="visually-hidden">上一张</span>
  </button>
  <button className="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span className="carousel-control-next-icon" aria-hidden="true"></span>
    <span className="visually-hidden">下一张</span>
  </button>
</div>

如果修改后仍无法滑动，可检查两个项：

• 已正确引入Bootstrap的JS文件（轮播交互依赖Bootstrap的JS逻辑）
• 遍历生成DOM元素时已添加唯一key属性，避免React渲染异常

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