隐藏Carousel项后自动调整布局 解决无限循环问题

问题根源 #

原初始化代码通过强制克隆元素填充每个carousel-item至6个的逻辑，会在隐藏元素后保留克隆副本，引发无限循环的视觉bug，且无法动态适配剩余可见元素的数量。

解决方案 #

放弃硬编码克隆填充的逻辑，改为基于可见元素动态分组，并在隐藏元素后重新初始化Carousel布局：

1. 替换初始化JS代码

移除原克隆逻辑，改用动态分组可见元素的方式：

// 初始化Carousel布局
function initCarousel() {
  const carouselInner = document.querySelector('#legendCarousel2 .carousel-inner');
  const visibleItems = document.querySelectorAll('.carouselLegend:not([style*="display: none"])');
  const itemsPerSlide = 6; // 保持原每组最多6个元素的设置
  const totalVisible = visibleItems.length;
  const totalSlides = Math.ceil(totalVisible / itemsPerSlide);

  // 清空原有carousel-item
  carouselInner.innerHTML = '';

  // 动态创建分组后的carousel-item
  for (let i = 0; i < totalSlides; i++) {
    const slide = document.createElement('div');
    slide.className = `carousel-item ${i === 0 ? 'active' : ''}`;
    
    // 填充当前分组的元素
    for (let j = i * itemsPerSlide; j < Math.min((i + 1) * itemsPerSlide, totalVisible); j++) {
      slide.appendChild(visibleItems[j].cloneNode(true));
    }
    
    carouselInner.appendChild(slide);
  }

  // 重新初始化Bootstrap Carousel实例
  const carousel = new bootstrap.Carousel(document.getElementById('legendCarousel2'), {
    interval: false,
    ride: false
  });
}

// 页面加载时初始化
$(function() {
  initCarousel();
});

2. 修改隐藏元素的逻辑

隐藏指定元素后，调用initCarousel()重新计算布局：

// 点击按钮隐藏元素并重新布局
$('.hide-button').on('click', function() {
  // 执行隐藏操作
  $('img[src*="legend - Comparison 2.svg"]').parent().parent().parent().css('display', 'none');
  // 重新初始化Carousel
  initCarousel();
});

3. 保留原有CSS

原CSS无需修改，继续使用即可保证Carousel的横向布局和控制按钮样式。

关键说明 #

• 动态分组：根据当前可见元素的数量，自动划分成每组最多6个的幻灯片，避免克隆多余元素
• 重新初始化：每次隐藏元素后重建Carousel的DOM结构并重新实例化，确保布局正确且无循环异常
• 无强制填充：不再硬塞元素到每个幻灯片，完全基于实际可见内容调整

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