Bootstrap Carousel（DW CC）无法添加3张以上图片求助

核心问题说明 #

DW CC默认生成的Bootstrap轮播仅包含3个幻灯片，手动添加时必须严格对应轮播的完整结构，否则会出现识别或功能失效问题。以下是分步操作：

1. 复制并修改轮播项（.carousel-item） #

找到HTML中的.carousel-inner区块，这是存放所有轮播图片的容器：

<div class="carousel-inner">
  <!-- 原有3个轮播项 -->
  <div class="carousel-item active">
    <img src="img/1.jpg" class="d-block w-100" alt="图1">
  </div>
  <div class="carousel-item">
    <img src="img/2.jpg" class="d-block w-100" alt="图2">
  </div>
  <div class="carousel-item">
    <img src="img/3.jpg" class="d-block w-100" alt="图3">
  </div>

  <!-- 开始添加第4张及后续图片 -->
  <div class="carousel-item">
    <img src="img/4.jpg" class="d-block w-100" alt="图4">
  </div>
  <!-- 重复此结构，直到添加完30张图片 -->
</div>

• 注意：仅第一个.carousel-item需要保留active类，其他轮播项不要加，否则会导致轮播初始显示异常。
• 确保图片路径与实际文件夹一致（比如你的图片存在images文件夹，就把src改成images/xxx.jpg）。

2. 更新轮播指示器（.carousel-indicators） #

轮播顶部/底部的小圆点指示器需要与轮播项数量一一对应，找到.carousel-indicators区块：

<div class="carousel-indicators">
  <!-- 原有3个指示器 -->
  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>

  <!-- 添加第4个指示器 -->
  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
  <!-- 重复此结构，直到数量与30张图片匹配 -->
</div>

• data-bs-slide-to的值按顺序递增（从0开始计数），aria-label对应轮播项的序号。
• 仅第一个指示器保留active和aria-current="true"属性。

3. 解决DW CC识别问题 #

• DW CC的可视化预览对自定义扩展的Bootstrap组件支持有限，不要依赖预览判断效果，直接用浏览器打开HTML文件测试。
• 确保页面已正确引入Bootstrap的JS文件（通常是bootstrap.bundle.min.js），轮播的切换功能完全依赖这个文件，缺失的话所有轮播项会堆叠显示。

4. 批量添加的小技巧（可选） #

如果你的图片命名有规律（比如img1.jpg到img30.jpg），可以用记事本批量生成代码：

1. 写好轮播项模板：<div class="carousel-item"><img src="img/[num].jpg" class="d-block w-100" alt="图[num]"></div>
2. 复制30份，把[num]替换成对应的数字（注意给第一个模板加上active类）
3. 指示器同理，批量生成按钮并修改data-bs-slide-to和aria-label的数值

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