如何在react-multi-carousel中控制单张幻灯片的显示项目数？能否像react-elastic-carousel那样设置itemsToShow={5}？

你好！react-multi-carousel确实没有像react-elastic-carousel那样直接提供itemsToShow属性，但它是通过**responsive配置对象**来实现不同屏幕尺寸下控制显示项目数量的，这其实比单一的itemsToShow更灵活，适配多端场景。

具体实现方法 #

你需要在responsive对象中定义不同断点（屏幕宽度）对应的slidesToShow值（对应字段为items），来控制对应尺寸下显示的项目数量。比如你想在桌面端固定显示5个项目，可以这样配置：

// 先定义响应式配置
const responsive = {
  // 屏幕宽度 >= 1024px时显示5个项目
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 5 // 这里的items等同于react-elastic-carousel的itemsToShow
  },
  // 平板端显示3个
  tablet: {
    breakpoint: { max: 1023, min: 464 },
    items: 3
  },
  // 移动端显示2个
  mobile: {
    breakpoint: { max: 463, min: 0 },
    items: 2
  }
};

// 集成到你的Carousel组件中
<Carousel 
  ssr 
  infinite={true} 
  itemClass="item" 
  responsive={responsive} 
> 
  {data.map((item) => { 
    return ( 
      <NavLink className='text' to='#' key={item.id}> {/* 务必添加唯一key属性，避免React警告 */}
        <Card className='card' > 
          <Card.Body> 
            <div> 
              <img className='image' src={item.image} alt={item.name} /> {/* 建议添加alt属性优化可访问性 */}
            </div>
            <span>{item.name}</span> 
          </Card.Body> 
        </Card> 
      </NavLink> 
    ); 
  })} 
</Carousel>

关键说明 #

• react-multi-carousel中，responsive里每个断点的items值就对应react-elastic-carousel的itemsToShow，作用完全一致。
• 如果想在所有屏幕尺寸下固定显示5个项目，可以简化配置：

  const responsive = {
    allDevices: {
      breakpoint: { max: 3000, min: 0 },
      items: 5
    }
  };
  

• 列表渲染时记得添加唯一key属性，这是React的最佳实践，能避免不必要的性能损耗和控制台警告。

这样配置后，就能在react-multi-carousel中实现你想要的控制显示项目数量的效果，完美适配你的Node.js 18环境~

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