如何解决 TranslateX 在滑块上不起作用的问题？

Question

  const slider = useRef();
  let tx = 0;

  const slideForward = () => {
    if (tx > -400) {
      tx -= 100;
    }
    slider.current.style.transform = `translateX(`${tx}%`)`;
  };
  const slideBackward = () => {};

  return (
    <div className="Customers">
      <img src={nextIcon} alt="" className="nextIcon" onClick={slideForward} />
      <img src={nextIcon} className="backIcon" alt="" onClick={slideBackward} />

      {customerData.map((record) => (
        <div key={record.id} className="slider">
          <ul ref={slider}>
            <li>
              <img src={record.logo} alt={`${record.company}-Logo`} />
            </li>
          </ul>
        </div>
      ))}
    </div>
  );
};

export default Customers;

为什么滑块不动，并且当我单击下一步按钮时只显示最后一张图片？

我希望每次按下下一个按钮时滑块都移动 100%

Answer 1

一对额外的反引号位于被分配给transform的

文字

中。 改变

slider.current.style.transform = `translateX(`${tx}%`)`;

到

slider.current.style.transform = `translateX(${tx}%)`;

然后将

slider

ref

分配给循环中的每个

ul

元素。 改变

  {customerData.map((record) => (
    <div key={record.id} className="slider">
      <ul ref={slider}>
        <li>
          <img src={record.logo} alt={`${record.company}-Logo`} />
        </li>
      </ul>
    </div>
  ))}

到

<div className="slider" ref={slider}>
  <ul>
   {customerData.map((record) => (
     <li key={record.id}>
       <img src={record.logo} alt={`${record.company}-Logo`} />
     </li>
   ))}
 </ul>
</div>