React轮播组件问题：如何实现每页展示4个Logo？

期望效果 #

目标是让轮播每页展示4张企业Logo，效果参考下图：

当前问题 #

现在代码渲染后所有Logo都挤在同一页，完全达不到预期：

我试过调整CSS，但没解决问题。我的思路是用slice切分Logo数组，每页取4个，遍历生成img元素，用logoIndex做key优化渲染，想实现按页码动态切换子集的效果。

修复方案 #

1. 确认分页切片逻辑正确 #

确保slice的索引计算无错误，若当前页码从0开始：

const start = currentPage * 4;
const currentPageLogos = logos.slice(start, start + 4);

同时要确认切换页码时，currentPage的状态确实得到了更新——比如点击下一页按钮时，有没有正确将currentPage值加1。

2. 给轮播容器设置正确的布局CSS #

避免容器被内容随意撑开，给每张图分配合理空间：

.carousel-slide {
  display: flex;
  gap: 12px; /* 图片之间的间距 */
  width: 100%;
  overflow: hidden;
}
.carousel-slide img {
  flex: 0 0 auto;
  width: calc(25% - 9px); /* 4张图平分宽度，减去gap的占比 */
  object-fit: contain;
}

如果使用了react-slick这类第三方轮播库，直接配置slidesToShow: 4即可，无需手动切片。

3. 检查状态更新是否生效 #

比如分页按钮的点击事件，要确保正确触发状态更新：

const goToNextPage = () => {
  setCurrentPage(prev => prev + 1);
};

保证状态更新后，组件会重新渲染并切分新的Logo子集。

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