同一页面两个Bootstrap 5轮播图图片混淆问题求助

问题背景 #

同一页面添加两个Bootstrap 5轮播图，已为每个轮播设置唯一ID，但第二个轮播图仍会混入第一个轮播的图片，每次显示前一个轮播的2张图片，设置唯一ID后问题未解决。

问题根源 #

你的JavaScript代码是全局获取所有轮播的item元素，导致跨轮播进行克隆操作，具体问题点：

• 处理第二个轮播的item时，nextElementSibling会指向第一个轮播的item（DOM结构中第一个轮播的元素在第二个之前）
• 循环里的items[0]直接取了页面第一个carousel-item（属于第一个轮播），导致克隆了不属于当前轮播的内容

修复方案 #

针对每个轮播单独处理内部item，确保所有克隆操作都在当前轮播范围内进行：

修复后的JavaScript代码 #

// 遍历每个独立的轮播容器
document.querySelectorAll('.carousel').forEach(carousel => {
  const minPerSlide = 3;
  // 仅获取当前轮播下的所有item
  const items = carousel.querySelectorAll('.carousel-item');
  
  items.forEach(el => {
    let next = el.nextElementSibling;
    for (let i = 1; i < minPerSlide; i++) {
      // 无后续item时，仅从当前轮播的第一个item开始循环
      if (!next) {
        next = items[0];
      }
      const cloneChild = next.cloneNode(true);
      el.appendChild(cloneChild.children[0]);
      next = next.nextElementSibling;
    }
  });
});

修复逻辑说明 #

• 先遍历每个轮播容器，将操作限制在当前轮播内部
• 获取item时仅选取当前轮播下的.carousel-item，避免跨轮播污染
• 循环克隆时，仅引用当前轮播的第一个item，确保内容独立

你的HTML代码无需修改，保持现有唯一ID和结构即可。

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