React轮播组件开发问题：仅显示第一张图片，其余图片无法展示

你的核心问题出在容器宽度设置错误和位移逻辑不完善，下面是具体修复方案：

1. 修正CSS结构 #

目前你把overflow: hidden和width:100%都加在了承载slide的.banner容器上，导致容器本身只能容纳一个slide（因为每个slide宽度也是100%），后面的slide被容器截断无法显示。需要调整结构：

/* 新增外层容器，负责截断显示区域 */
.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.banner {
  display: flex;
  height: 300px;
  flex-wrap: nowrap;
  /* 让容器宽度自适应所有slide的总宽度 */
  width: fit-content;
}

.slide {
  height: 100%;
  /* 每个slide宽度等于外层可视容器的宽度 */
  width: 100vw;
  flex-shrink: 0;
  list-style: none; /* 移除li默认的列表样式 */
  padding: 0;
  margin: 0;
}

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

2. 调整JSX结构与位移逻辑 #

• 把ref绑定到外层的.slider-container，获取可视区域的宽度（即单个slide的宽度）
• 修改位移逻辑，实现累加滑动（支持连续点击切换），同时处理循环边界

const Slider = () => {
  const bannerPics = [banner1, banner2, banner3];
  const slideCount = bannerPics.length;
  const [translateX, setTranslateX] = useState(0);
  // 绑定到外层容器，获取可视区域宽度
  const sliderContainerRef = useRef();

  const renderPics = bannerPics.map((p, i) => {
    return (
      <li key={i} className={styles.slide}>
        <img className={styles.img} src={p} alt={`banner-${i}`} />
      </li>
    );
  });

  const sliderHandler = () => {
    const slideWidth = sliderContainerRef.current.clientWidth;
    // 计算下一次的位移值，超出最后一张时回到初始位置
    const nextTranslate = translateX + slideWidth;
    setTranslateX(nextTranslate >= slideWidth * slideCount ? 0 : nextTranslate);
  };

  return (
    <div className={styles.sliderContainer} ref={sliderContainerRef}>
      <div
        className={styles.banner}
        style={{ 
          transform: `translate3d(${-translateX}px, 0, 0)`, 
          transition: 'transform 0.3s ease' // 添加平滑过渡动画
        }}
      >
        {renderPics}
      </div>
      <button onClick={sliderHandler}>MOVE</button>
    </div>
  );
};

export default Slider;

关键修复点说明 #

• 容器分层：外层容器负责截断显示，内层容器承载所有横向排列的slide，确保所有slide都能被正确布局
• slide宽度：用100vw确保每个slide占满可视区域，也可以通过JS获取外层容器宽度来设置，兼容性更好
• 位移逻辑：累加位移值并添加边界判断，实现循环轮播；加入transition属性让滑动更平滑
• 移除默认样式：给slide添加list-style: none、padding:0、margin:0避免默认列表标记干扰布局

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