ant-design
  1. ant-design-carousel
PreviousNext

Ant Design Carousel

The Ant Design Carousel component provides a convenient way to showcase multiple images or content in a slideshow format. It includes customizable controls and features a responsive layout to adapt to different screen sizes.

Syntax

To use the Ant Design Carousel component, import it from the antd library:

import { Carousel } from 'antd';

Then, include the <Carousel> tag in your code and add content to each slide using <div> or <img> tags:

<Carousel>
  <div>
    <h3>Slide 1</h3>
    <p>Content goes here.</p>
  </div>
  <div>
    <h3>Slide 2</h3>
    <p>Content goes here.</p>
  </div>
  <div>
    <img src="image-url" alt="description" />
  </div>
</Carousel>

By default, the component will display three slides at a time. You can customize the number of slides shown with the slidesToShow prop and adjust the duration of the animation with the autoplaySpeed prop:

<Carousel slidesToShow={2} autoplaySpeed={3000}>
  ...
</Carousel>

Use

The Ant Design Carousel component is useful for any application where you want to display multiple images or content in a slideshow format. It can be used in portfolio websites, e-commerce sites, and more. The component is fully customizable and can be adapted to match your project's branding and design.

Importance

Slideshow components are a commonly used feature in web design. They provide a dynamic way of displaying content and can help keep users engaged. The Ant Design Carousel is a reliable and well-documented solution, providing an easy way to implement slide shows with minimal setup.

Example

Here is an example of a simple slideshow using the Ant Design Carousel component:

import { Carousel } from 'antd';

function App() {
  return (
    <Carousel autoplay>
      <div>
        <img src="https://via.placeholder.com/150" alt="placeholder" />
      </div>
      <div>
        <img src="https://via.placeholder.com/150" alt="placeholder" />
      </div>
      <div>
        <img src="https://via.placeholder.com/150" alt="placeholder" />
      </div>
    </Carousel>
  );
}

Summary

The Ant Design Carousel component is a powerful tool for displaying content in a slideshow format. It provides a responsive, customizable solution for showcasing multiple images or content items. The Ant Design documentation offers plenty of options for customization, making it a great solution for many web projects.

CardCollapse
Published on: