编码旋转木马时出现问题，图像不显示答案

【问题标题】：Problem when coding a carousel, images not showing编码旋转木马时出现问题，图像不显示
【发布时间】：2022-11-16 14:16:32
【问题描述】：

我尝试创建一个轮播。我在一个 div 中水平排列了几张图片，其中 0 flex 收缩，所以当我单击一个按钮时，所有图片都应该向左移动。但是，现在我只能看到第一张图片，我想知道我是否搞砸了 css，所以每张图片都有一个正确的不可见部分覆盖了其余图片。 `

const Slider = () => {
  const bannerPics = [banner1, banner2, banner3];

  const [translateX, setTranslateX] = useState(0);
  const currentWidthRef = useRef();

  const renderPics = bannerPics.map((p, i) => {
    //must have a key in order for animation to work(remount the component)
    return (
      <li key={i} className={styles.slide}>
        <img className={styles.img} src={p} alt="" />
      </li>
    );
  });

  const sliderHandler = () => {
    setTranslateX(currentWidthRef.current.clientWidth);
  };

  return (
    <div>
      <div
        ref={currentWidthRef}
        className={styles.banner}
        style={{ transform: `translate3d(${-translateX}px, 0, 0)` }}
      >
        {renderPics}
      </div>
      <button onClick={sliderHandler}>MOVE</button>
    </div>
  );
};

export default Slider;

CSS:

.banner {
  display: flex;
  height: 300px;
  width: 100%;
  overflow: hidden;
  flex-wrap: nowrap;
}

.slide {
  height: 100%;
  width: 100%;
  flex-shrink: 0;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

【问题讨论】：

标签： javascript css reactjs carousel

【解决方案1】：

它不起作用，因为banner被整体搬走了。

要使此轮播正常工作，您可以按照以下顺序操作：

创建一个包装banner的frame
设置frame为overflow: hidden
将img的列表映射到banner

动画banner移动

示例：（替换Slider组件中的return区域）

<div>
  <div className={styles.frame}>
    <div
      ref={currentWidthRef}
      className={styles.banner}
      style={{ transform: `translate3d(${-translateX}px, 0, 0)` }}
    >
      {renderPics}
    </div>
  </div>
  <button onClick={sliderHandler}>MOVE</button>
</div>

示例：（在 CSS 文件中添加 .frame 并替换 .banner）

.frame {
  display: flex;
  overflow: hidden;
}

.banner {
  display: flex;
  height: 300px;
  width: 100%;
  flex-wrap: nowrap;
  transition: all 0.2s;
}

这应该可以在不对现有代码进行太多重构的情况下工作，并且您可以根据条件进一步调整 translateX 的值以允许对该组件进行移动控制。

在旁注中，不确定为什么 translate3d 在这里用于 transform 因为 translateX 将用更少的代码做同样的事情。

例子：

style={{ transform: `translateX(${-translateX}px)` }}

希望这会有所帮助！

【讨论】：