如何使用HTML、CSS、JavaScript实现card-slider卡片滑动组件

实现方案 #

通过HTML+CSS+原生JS即可实现该需求，核心逻辑是控制卡片容器的水平偏移量完成滑动切换，同时做边界限制避免超出滑动范围。

完整代码 #

HTML结构

<div class="slider-wrapper">
  <button class="arrow arrow-left">&lt;</button>
  <div class="cards-container">
    <div class="card">卡片1</div>
    <div class="card">卡片2</div>
    <div class="card">卡片3</div>
    <div class="card">卡片4</div>
    <div class="card">卡片5</div>
  </div>
  <button class="arrow arrow-right">&gt;</button>
</div>

CSS样式

.slider-wrapper {
  position: relative;
  width: 940px; /* 3张卡片宽度+2个间距：3*300 + 2*20 = 940 */
  margin: 50px auto;
  overflow: hidden;
}
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  z-index: 10;
  font-size: 18px;
}
.arrow-left {
  left: 10px;
}
.arrow-right {
  right: 10px;
}
.cards-container {
  display: flex;
  gap: 20px;
  transition: transform 0.3s ease;
  transform: translateX(-320px); /* 初始偏移1个卡片+间距的宽度，实现左1右1卡片隐藏、中间3张可见 */
}
.card {
  min-width: 300px;
  height: 400px;
  background: #f5f5f5;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

JS逻辑

const cardsContainer = document.querySelector('.cards-container')
const leftArrow = document.querySelector('.arrow-left')
const rightArrow = document.querySelector('.arrow-right')
const step = 320 // 单张卡片宽度+间距，作为单次滑动的步长
const minOffset = -2 * step // 右滑边界：滑到卡片3、4、5可见后禁止继续右滑
const maxOffset = 0 // 左滑边界：滑到卡片1、2、3可见后禁止继续左滑
let currentOffset = -step // 初始偏移量

leftArrow.addEventListener('click', () => {
  if (currentOffset >= maxOffset) return
  currentOffset += step
  cardsContainer.style.transform = `translateX(${currentOffset}px)`
})

rightArrow.addEventListener('click', () => {
  if (currentOffset <= minOffset) return
  currentOffset -= step
  cardsContainer.style.transform = `translateX(${currentOffset}px)`
})

效果说明 #

• 初始状态左侧隐藏1张卡片、中间显示3张卡片、右侧隐藏1张卡片，完全匹配需求
• 点击箭头会触发平滑滑动动画，到达边界后自动禁止同方向滑动
• 可根据实际业务需求调整卡片尺寸、间距、动画时长等参数

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