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
Links
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
Happy Coding,
I hope the above example with help you to do your task.