TranslateX滑块失效：点击仅显示最后一张，请求实现每次移动100%

问题根源分析 #

1. 状态无法持久化：let tx = 0是普通变量，组件每次重渲染都会重置为0，导致每次点击slideForward时，看似在逐步递减，但组件更新后tx又回到初始值，多次点击后直接跳到最终偏移位置，而非逐步移动。
2. Ref绑定错误：在customerData.map循环中，每个<ul>都绑定了同一个slider ref，最终ref只会指向循环生成的最后一个<ul>，无法控制整个滑块容器。
3. 滑块结构错误：当前每个客户数据对应独立的<div className="slider">和<ul>，不符合滑块逻辑——滑块应该是单个容器包裹所有轮播项，而非每个项单独占一个容器。
4. 模板字符串语法错误：translateX(${tx}%)嵌套了反引号，会导致语法解析失败，正确写法应为translateX(${tx}%)。

修复后的完整代码 #

import { useRef, useState } from 'react';

const Customers = () => {
  const slider = useRef();
  // 用useState持久化偏移量状态
  const [tx, setTx] = useState(0);
  // 动态计算最大可偏移值，适配任意数量的轮播项
  const maxOffset = -(customerData.length - 1) * 100;

  const slideForward = () => {
    if (tx > maxOffset) {
      setTx(prevTx => prevTx - 100);
    }
  };

  const slideBackward = () => {
    if (tx < 0) {
      setTx(prevTx => prevTx + 100);
    }
  };

  return (
    <div className="Customers">
      <img src={nextIcon} alt="下一张" className="nextIcon" onClick={slideForward} />
      <img src={nextIcon} alt="上一张" className="backIcon" onClick={slideBackward} />
      {/* 单个滑块容器，包裹所有轮播项 */}
      <div className="slider">
        <ul ref={slider} style={{ transform: `translateX(${tx}%)` }}>
          {customerData.map((record) => (
            <li key={record.id}>
              <img src={record.logo} alt={`${record.company}-Logo`} />
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default Customers;

配套关键CSS样式 #

滑块需要横向排列并隐藏溢出内容，添加以下样式确保功能正常：

.Customers {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.slider ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  /* 宽度设为轮播项数量*100%，确保所有项横向排列 */
  width: calc(var(--item-count) * 100%);
  transition: transform 0.3s ease; /* 添加平滑过渡动画 */
}

.slider li {
  width: 100%;
  flex-shrink: 0;
}

.slider li img {
  width: 100%;
  height: auto;
}

.nextIcon, .backIcon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.nextIcon {
  right: 10px;
}

.backIcon {
  left: 10px;
}

注：可以在组件中通过style给.slider ul动态设置--item-count变量，比如style={{ '--item-count': customerData.length }}

核心修复说明 #

• 用useState替代普通变量保存偏移量，确保状态在组件重渲染时持久化，每次更新都会触发组件重新渲染并应用新的偏移值。
• 调整滑块结构，将所有轮播项放在同一个<ul>中，确保ref绑定到正确的容器。
• 动态计算最大偏移量，避免硬编码数值，适配不同数量的轮播项。
• 修复模板字符串语法错误，添加过渡动画提升交互体验。

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