ANTD轮播预览如何显示情侣图片

Question

我想知道是否可以在 ANTD 轮播的单个预览中显示一对图像。为了保险起见，我有一个旋转木马，上面可能有不同数量的图像。问题是我想在预览中显示所有可用的图像，而不必滚动浏览它们。我试图改变图像的大小，但这没有帮助。此外，我还没有在 ANTD 中找到任何相关的属性。有谁知道这可能吗？

import { Carousel } from 'antd';

const contentStyle = {
  height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
};

ReactDOM.render(
  <Carousel effect="fade">
    <div>
      <h3 style={contentStyle}>1</h3>
    </div>
    <div>
      <h3 style={contentStyle}>2</h3>
    </div>
    <div>
      <h3 style={contentStyle}>3</h3>
    </div>
    <div>
      <h3 style={contentStyle}>4</h3>
    </div>
  </Carousel>,
  mountNode,
);

Answer 1

Here's 似乎有效。

主要是在我的数组的第 0 个位置添加了一个额外的项目，并有条件地渲染了一个预览帧，其中包括网格中的所有图像。

样本：

const images = [...new Array(5).keys()].map((rowIndex, _, array) => {

  if (rowIndex === 0) {
    return (
      <React.Fragment>
        <div key={rowIndex} style={previewStyle}>
          {array.map((colIndex) => (
            <h3 key={(rowIndex + 1) * (colIndex + 1)} style={h3Style}>
              Preview: {colIndex}
            </h3>
          ))}
        </div>
      </React.Fragment>
    );
  }

  return (
    <React.Fragment>
      <h3 key={rowIndex} style={{...h3Style, lineHeight: '160px',}}>
        {rowIndex}
      </h3>
    </React.Fragment>
  );
});

ANTD轮播预览如何显示情侣图片

How to show couple images in preview of ANTD carousel

jcarousel

jsx

reactjs

antd

ant-design-pro