如何创建点击可切换显示/隐藏卡片的Hero Slider轮播组件

实现思路 #

• 布局框架：用flex容器承载所有轮播卡片，默认仅激活卡片占满容器宽度，其余卡片固定窄幅宽度，确保非激活卡片只露出部分区域。
• 视觉区分：激活卡片显示完整图片与下方描述文本；非激活卡片通过图片偏移只展示半幅内容，同时用滤镜调暗，隐藏描述文本。
• 交互逻辑：点击任意卡片时，移除所有卡片的激活状态，为当前点击卡片添加激活类，通过CSS过渡实现状态切换的平滑动画。

核心技术方向 #

• CSS层面：
  • 用flex布局实现卡片的自适应排列与宽度控制
  • 用transform: translateX(-50%)偏移非激活卡片的图片，只显示右半部分
  • 用filter: brightness(0.5)给非激活卡片添加调暗效果
  • 用transition属性给宽度、图片位置、滤镜等变化添加平滑过渡
• JS层面：
  • 监听卡片的click事件，切换激活类名
  • 控制激活状态的唯一性，确保同一时间只有一个卡片处于激活状态

完整代码示例 #

HTML结构 #

<div class="hero-slider">
  <div class="slide active">
    <img src="https://picsum.photos/800/400?random=1" alt="Slide 1">
    <div class="description">
      <h3>自然风光</h3>
      <p>连绵的山脉与澄澈的湖水，构成一幅绝美的自然画卷</p>
    </div>
  </div>
  <div class="slide">
    <img src="https://picsum.photos/800/400?random=2" alt="Slide 2">
    <div class="description">
      <h3>城市夜景</h3>
      <p>霓虹闪烁的都市夜晚，彰显着现代都市的活力与繁华</p>
    </div>
  </div>
  <div class="slide">
    <img src="https://picsum.photos/800/400?random=3" alt="Slide 3">
    <div class="description">
      <h3>森林秘境</h3>
      <p>幽深的原始森林，藏着无数未知的生命与自然奥秘</p>
    </div>
  </div>
</div>

CSS样式 #

.hero-slider {
  width: 100%;
  height: 400px;
  display: flex;
  overflow: hidden;
  gap: 8px;
  background: #000;
}

.slide {
  flex: 0 0 120px;
  height: 100%;
  position: relative;
  cursor: pointer;
  transition: flex 0.4s ease, filter 0.4s ease;
  filter: brightness(0.5);
}

.slide.active {
  flex: 1;
  filter: brightness(1);
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.slide:not(.active) img {
  transform: translateX(-50%);
}

.slide .description {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.slide.active .description {
  opacity: 1;
}

.slide .description h3 {
  margin: 0 0 8px;
  font-size: 24px;
}

.slide .description p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

JavaScript逻辑 #

const slides = document.querySelectorAll('.slide');

slides.forEach(slide => {
  slide.addEventListener('click', () => {
    // 移除所有卡片的激活状态
    slides.forEach(s => s.classList.remove('active'));
    // 给当前点击的卡片添加激活状态
    slide.classList.add('active');
  });
});

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