如何参照设计文件在React JS中实现符合要求的滑块组件

目标匹配设计效果如下：

使用swiper、splide等第三方滑块库难以匹配效果，核心是这类库默认以平移动画实现线性轮播，要改造成层叠缩放样式需要覆盖大量内置逻辑，可控性差。直接基于原生CSS+JS实现可以1:1对齐设计稿样式，具体方案如下：

核心效果对齐逻辑 #

设计稿的滑块特征可以拆解为几个可量化的样式规则，不需要复杂计算：

• 中间位置为激活态卡片：尺寸最大、层级最高，完整展示
• 激活卡片左右两侧的卡片：依次缩小尺寸、向左右方向偏移，层级随距离激活位置的远近递减，仅露出部分内容
• 所有状态切换使用平滑缓动动画，支持点击侧卡、按钮、拖拽切换
• 卡片统一配置圆角、投影，层叠时自然形成遮挡关系

完整实现代码 #

HTML结构 #

<div class="custom-slider">
  <div class="slider-track">
    <div class="slider-card">卡片1内容</div>
    <div class="slider-card">卡片2内容</div>
    <div class="slider-card active">卡片3内容</div>
    <div class="slider-card">卡片4内容</div>
    <div class="slider-card">卡片5内容</div>
  </div>
  <button class="slider-btn prev">‹</button>
  <button class="slider-btn next">›</button>
</div>

CSS样式（核心控制层叠偏移效果） #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  padding: 40px 0;
  background: #f5f5f7;
}
.custom-slider {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 520px;
  margin: 0 auto;
  overflow: hidden;
}
.slider-track {
  position: relative;
  width: 100%;
  height: 100%;
}
.slider-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  height: 460px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  background: #ffffff;
  transform: translate(-50%, -50%) scale(0.75);
  transition: all 0.45s cubic-bezier(0.33, 1, 0.68, 1);
  z-index: 1;
  cursor: pointer;
  overflow: hidden;
}
/* 激活态卡片：最高层级、最大尺寸 */
.slider-card.active {
  transform: translate(-50%, -50%) scale(1);
  z-index: 10;
}
/* 激活位左侧紧邻卡片 */
.slider-card.prev-1 {
  transform: translate(calc(-50% - 300px), -50%) scale(0.9);
  z-index: 5;
}
/* 激活位左侧第二张卡片 */
.slider-card.prev-2 {
  transform: translate(calc(-50% - 530px), -50%) scale(0.78);
  z-index: 2;
}
/* 激活位右侧紧邻卡片 */
.slider-card.next-1 {
  transform: translate(calc(-50% + 300px), -50%) scale(0.9);
  z-index: 5;
}
/* 激活位右侧第二张卡片 */
.slider-card.next-2 {
  transform: translate(calc(-50% + 530px), -50%) scale(0.78);
  z-index: 2;
}
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  font-size: 28px;
  color: #333;
  cursor: pointer;
  z-index: 20;
  transition: background 0.2s;
}
.slider-btn:hover {
  background: #f0f0f0;
}
.slider-btn.prev {
  left: 24px;
}
.slider-btn.next {
  right: 24px;
}

JS交互逻辑 #

const track = document.querySelector('.slider-track');
const cards = Array.from(track.querySelectorAll('.slider-card'));
const prevBtn = document.querySelector('.slider-btn.prev');
const nextBtn = document.querySelector('.slider-btn.next');
// 初始激活位取带active类的卡片索引
let activeIndex = cards.findIndex(item => item.classList.contains('active'));

function renderSlider() {
  // 清空所有位置类
  cards.forEach(card => card.className = 'slider-card');
  // 标记当前激活卡片
  cards[activeIndex].classList.add('active');
  // 标记左侧卡片位置
  if (activeIndex - 1 >= 0) cards[activeIndex - 1].classList.add('prev-1');
  if (activeIndex - 2 >= 0) cards[activeIndex - 2].classList.add('prev-2');
  // 标记右侧卡片位置
  if (activeIndex + 1 < cards.length) cards[activeIndex + 1].classList.add('next-1');
  if (activeIndex + 2 < cards.length) cards[activeIndex + 2].classList.add('next-2');
}

// 左右按钮切换
prevBtn.addEventListener('click', () => {
  if (activeIndex === 0) return;
  activeIndex--;
  renderSlider();
});
nextBtn.addEventListener('click', () => {
  if (activeIndex === cards.length - 1) return;
  activeIndex++;
  renderSlider();
});

// 点击任意卡片直接切换到激活位
cards.forEach((card, index) => {
  card.addEventListener('click', () => {
    activeIndex = index;
    renderSlider();
  });
});

// 首次渲染
renderSlider();

样式调整说明 #

• 如果设计稿中需要展示更多/更少的侧边卡片，直接在CSS中新增对应位置类（如prev-3/next-3），调整偏移距离、缩放值即可
• 卡片尺寸、圆角、投影、动画速度、偏移距离等参数，直接对照设计稿测量后修改对应CSS属性值即可，不需要改动逻辑
• 需要自动轮播可直接添加定时器，定时修改activeIndex后调用renderSlider()
• 需要拖拽切换功能，可监听touch/mouse事件判断滑动方向，对应增减activeIndex即可

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