Bootstrap Carousel问题：单页多轮播+每屏2项显示异常

我来帮你搞定这个轮播的问题，你的代码里踩了几个Bootstrap轮播的常见坑，咱们一步步捋清楚并修复：

问题根源分析 #

1. 重复ID惹的祸：所有轮播都用了myCarousel这个ID，HTML里ID必须是唯一的！这会导致所有的指示器、左右控制按钮都只认第一个轮播，剩下的轮播自然乱套。
2. 缺了active类：Bootstrap轮播要求至少有一个.item带.active类，不然它不知道该显示哪一个，所有内容就堆在一起了。
3. 没做分组处理：你要每屏显示2个metadata项，但原代码每个项单独占一个.item，肯定达不到需求。

修复后的完整代码 #

1. 修改轮播生成逻辑（核心部分） #

我们要给每个轮播生成唯一ID，把每2个metadata项打包成一个轮播面板，还要给第一个面板加上active类：

array.forEach(function(elem){
  // 给每个轮播生成唯一ID，用elem的id区分
  const carouselId = `myCarousel-${elem.id}`;
  output_info += `<div class="col-md-12">
    <div id="${carouselId}" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">`;
      
  // 根据每2个一组的数量，动态生成指示器（比如4个metadata就需要2个指示器）
  const panelCount = Math.ceil(elem.metadata.length / 2);
  for(let i=0; i<panelCount; i++){
    // 第一个指示器默认激活
    const activeClass = i === 0 ? 'class="active"' : '';
    output_info += `<li data-target="#${carouselId}" data-slide-to="${i}" ${activeClass}></li>`;
  }
  
  output_info += `</ol>
    <div class="carousel-inner">`;
    
  // 每2个metadata项打包成一个轮播面板
  for(let i=0; i<elem.metadata.length; i+=2){
    const isActive = i === 0 ? 'active' : '';
    output_info += `<div class="item ${isActive}">
      <div class="row">`;
      // 处理当前组的第一个项
      if(elem.metadata[i]){
        output_info += each_metadata_html(elem.metadata[i]);
      }
      // 处理当前组的第二个项（如果存在的话）
      if(elem.metadata[i+1]){
        output_info += each_metadata_html(elem.metadata[i+1]);
      }
    output_info += `</div>
    </div>`;
  }
  
  output_info += `</div>
    <!-- 更新控制按钮的href，指向当前轮播的唯一ID -->
    <a class="left carousel-control" href="#${carouselId}" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#${carouselId}" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>`;
});

// 最后插入到容器里
$('#results').html(output_info);

2. 更新each_metadata_html函数 #

要让每个metadata项在同一行占一半宽度，我们给它加个col-md-6类：

function each_metadata_html(elem){
  return `<div class="col-md-6">
    <p>${elem.name}</p>
  </div>`;
}

关键修改点说明 #

• 唯一ID：用myCarousel-${elem.id}保证每个轮播的ID不重复，指示器和控制按钮的目标也跟着对应上，不会再串台。
• 2项分组：通过for循环步长设为2，把每两个项放在同一个.item的.row里，配合col-md-6实现一屏显示2个内容。
• 激活状态：给第一个轮播面板和第一个指示器加上active类，让轮播初始化时就能正常显示第一个面板。
• 动态指示器：根据分组后的面板数量生成对应个数的指示器，保证指示器和面板数量匹配，切换逻辑正常。

这样改完之后，3个独立的轮播就能正常工作，每个轮播每屏显示2个metadata项，再也不会堆叠在一起啦。

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