CSS并排滑块开发：实现侧边显示非活跃滑块的动画效果

嘿，我看你正在打造一款带侧边显示非活跃滑块的动画并排滑块组件，还要处理子元素高度未知、页面缩放时高度变化的问题，这几个点确实容易遇到布局坑。我结合你给出的基础结构，整理了一套完整的解决方案：

先把咱们要实现的关键点明确下：

• 带有平滑过渡动画的并排滑块切换效果
• 非活跃状态的滑块需保留在侧边显示，不能完全隐藏
• 自动适配子元素的未知高度，且页面缩放时能同步调整滑块高度

1. 高度自适应处理 #

因为子元素高度不确定，绝对不能用固定高度。推荐用Flexbox+动态计算的方式，确保两个滑块始终保持高度一致：

.side-by-side-slider {
  display: flex;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.ss-slide {
  flex: 1;
  transition: all 0.5s ease;
  overflow: hidden;
}

.ss-slide-content {
  height: 100%;
  padding: 2rem;
  overflow-y: auto; /* 内容过长时允许滚动 */
}

再配合JS监听窗口缩放，实时同步高度：

function syncSliderHeight() {
  const slides = document.querySelectorAll('.ss-slide');
  const maxHeight = Math.max(...Array.from(slides).map(slide => slide.offsetHeight));
  slides.forEach(slide => slide.style.minHeight = `${maxHeight}px`);
}

// 初始化+监听窗口变化
window.addEventListener('load', syncSliderHeight);
window.addEventListener('resize', syncSliderHeight);

2. 非活跃滑块的侧边显示与动画 #

要让非活跃滑块留在侧边，不能用display: none或者opacity: 0，而是通过调整宽度占比来实现平滑过渡：

.ss-slide.active {
  flex: 3; /* 活跃滑块占3份宽度，非活跃占1份 */
}

这样切换时，非活跃滑块会平滑缩到侧边，同时保持和活跃滑块一致的高度，完全满足需求。

3. 切换逻辑实现 #

给滑块添加切换按钮，实现点击切换活跃状态的功能：

const toggleBtns = document.querySelectorAll('.slider-toggle');

toggleBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.ss-slide').forEach(slide => {
      slide.classList.toggle('active');
    });
    // 切换后重新同步高度
    syncSliderHeight();
  });
});

<div class="row side-by-side-slider">
  <div class="col-md-6 ss-slide ss-slide-left active">
    <div class="ss-slide-content">
      <h3>左侧滑块内容</h3>
      <p>这里可以放任意高度的内容，比如长文本、图片，页面缩放时高度会自动调整</p>
      <button class="slider-toggle">切换到右侧</button>
    </div>
  </div>
  <div class="col-md-6 ss-slide ss-slide-right">
    <div class="ss-slide-content">
      <h3>右侧滑块内容</h3>
      <img src="https://picsum.photos/400/600" alt="示例图片">
      <button class="slider-toggle">切换到左侧</button>
    </div>
  </div>
</div>

这样调整后，你的滑块不仅能满足侧边显示非活跃项的需求，还能完美适配未知高度和页面缩放的场景，动画也足够流畅。如果需要调整细节，比如动画速度、侧边宽度比例，直接修改CSS里的transition时长和flex占比值就行～

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