Solution

To add image in ant design carousel in react js, first install ant design library using npm install antd command import carousel component from it. You have to use the img element with in the carousel.

Snippet

In this snippet, see the short example to use Carousel component of ant design library, with the use Array function and <div> element set in <img src={image.url} alt={image.description} style={{ width: '300px', height: '200px' }} />.

<Carousel autoplay>
  {imageArray.map((image) => (
    <div>
      <img src={image.url} alt={image.description} style={{ width: '300px', height: '200px' }} />
    </div>
  ))}
</Carousel>

Example

In this example, we will import the Carousel component from the ant design library. import 4 images in ant design and use url { url: painting, description: 'Image 1' }, array function with map function add image in ant design carousel in react js.

Let’s start coding…

App.js

import React from 'react'
import { Carousel } from 'antd';
import painting from "./img/painting.jpg";
import painting1 from "./img/painting-1.jpg";
import painting3 from "./img/painting-3.jpg";
import painting4 from "./img/painting-4.jpg";


const imageArray = [
  { url: painting, description: 'Image 1' },
  { url: painting1, description: 'Image 2' },
  { url: painting3, description: 'Image 3' },
  { url: painting4, description: 'Image 4' },
];

const App = () => (
  <div style={{
    display: 'block', width: 400, padding: 30
  }}>
    <Carousel autoplay>
      {imageArray.map((image) => (
        <div>
          <img src={image.url} alt={image.description} style={{ width: '300px', height: '200px' }} />
        </div>
      ))}
    </Carousel>
  </div>
);

export default App;

Output

Ant-design, image

Here, we are provided code sandbox links for the above program to add image in ant design carousel. Then you can use whenever you went and do the changes as per your requirements

codesandbox

Happy Coding,

I hope the above example with help you to do your task.