CODEWITHSUNDEEP
reactjsjsxantdjcarouselant-design-pro
Vlad
Vlad

Reputation: 511

How to show couple images in preview of ANTD carousel

I was wondering is it possible to show couple images on single preview of ANTD carousel. For insrance i have a carousel on which i may have different amount of immages. The problem is that i want to show all avaliable images in preview without heving to schroll through them. I tried to change size of immages but that didn't help. Also i haven't found any properties in ANTD for that. Does anyone know is it possible?

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,
);

Upvotes: 0

Views: 1480

Answers (1)

4UmNinja
4UmNinja

Reputation: 542

Here's what seemed to work.

Mainly just added an extra item to my array in 0th position and conditionally rendered a preview frame which included all the images in a grid.

Sample:

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>
  );
});

Upvotes: 1

Related Questions