如何在ANTD Carousel（走马灯）的单页预览中展示多张图片

该需求完全可以实现，不需要依赖Antd Carousel的内置配置，因为单张轮播帧内的内容支持完全自定义。
Antd Carousel的规则是：组件的每一个直接子元素对应一个独立的轮播滑动帧，你要在单个预览页展示多张图片，只需要在同一个直接子元素容器内完成多图的布局即可。

代码示例 #

import { Carousel } from 'antd';

const contentStyle = {
  height: '160px',
  display: 'flex',
  gap: '12px',
  alignItems: 'center',
  justifyContent: 'center',
  background: '#364d79',
  padding: '0 20px'
};

// 模拟不定数量的图片列表
const imageList = [
  'https://example.com/img1.jpg',
  'https://example.com/img2.jpg',
  'https://example.com/img3.jpg',
  'https://example.com/img4.jpg'
]

ReactDOM.render(
  <Carousel effect="fade">
    {/* 单个轮播帧容器，内部放所有要展示的图片 */}
    <div style={contentStyle}>
      {imageList.map((imgSrc, index) => (
        <img 
          key={index}
          src={imgSrc}
          style={{ height: '120px', borderRadius: '4px' }}
          alt={`图片${index+1}`}
        />
      ))}
    </div>
    {/* 其他轮播帧按原有逻辑写即可 */}
    <div style={contentStyle}>
      <h3 style={{color: '#fff'}}>第二帧内容</h3>
    </div>
  </Carousel>,
  mountNode,
);

补充说明 #

• 如果图片数量过多超出单帧宽度，可以给容器加overflowX: 'auto'实现横向滚动，或者用grid布局自动换行，也可以动态调整图片缩放比例适配容器宽度。
• 如果需要按固定数量拆分图片到不同轮播帧，也可以先对图片数组做分组处理，再遍历生成多个轮播帧即可。

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