在Bootstrap轮播中集成Cocoen滑块的技术问题求助

我之前也碰到过一模一样的情况，核心问题其实很明确：Bootstrap轮播默认会隐藏非active状态的轮播项，而Cocoen初始化时必须依赖元素处于可见状态，才能正确计算尺寸、绑定交互事件。页面加载时只有第一个active项里的Cocoen能完成初始化，后面隐藏的项根本没法正常启动。

下面是经过验证的可行解决方案：

1. 初始化页面加载时可见的Cocoen #

页面加载完成后，先处理当前处于active状态的轮播项里的Cocoen：

document.addEventListener('DOMContentLoaded', function() {
  // 只初始化可见的（active项内的）Cocoen
  document.querySelectorAll('.carousel-inner .item.active .cocoen').forEach(element => {
    new Cocoen(element);
    // 给已初始化的元素加标记，避免重复操作
    element.classList.add('cocoen-initialized');
  });
});

2. 绑定轮播滑动完成事件，初始化新显示的Cocoen #

这里一定要用slid.bs.carousel事件（别用你之前尝试的slide.bs.carousel）——这个事件是在轮播滑动完全结束后触发的，此时新的轮播项已经切换为active并显示出来，Cocoen才能顺利完成初始化：

$('#MySlider').on('slid.bs.carousel', function() {
  // 获取当前active项里的Cocoen元素
  const targetCocoen = this.querySelector('.item.active .cocoen');
  
  // 检查是否还未初始化过
  if (targetCocoen && !targetCocoen.classList.contains('cocoen-initialized')) {
    new Cocoen(targetCocoen);
    targetCocoen.classList.add('cocoen-initialized');
  }
});

为什么之前的尝试没成功？ #

• 用slide.bs.carousel事件时，目标轮播项还没切换为active，仍然处于隐藏状态，Cocoen无法正确读取元素的宽高信息，导致初始化失败。
• 没有给已初始化的元素加标记，可能会重复初始化同一个Cocoen，引发不必要的性能问题或者交互异常。

补充：确保HTML结构正确 #

每个轮播项里都要包含独立的Cocoen容器，示例结构如下：

<div id="MySlider" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="cocoen">
        <img src="before-image-1.jpg" alt="Before">
        <img src="after-image-1.jpg" alt="After">
      </div>
    </div>
    <div class="carousel-item">
      <div class="cocoen">
        <img src="before-image-2.jpg" alt="Before">
        <img src="after-image-2.jpg" alt="After">
      </div>
    </div>
    <!-- 更多轮播项 -->
  </div>
</div>

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