Carousel

A carousel component. Scales with its container.

When To Use#

When there is a group of content on the same level.
When there is insufficient content space, it can be used to save space in the form of a revolving door.
Commonly used for a group of pictures/cards.

Examples

1

Basic

Basic usage.

import { Carousel } from 'antd';

function onChange(a, b, c) {
  console.log(a, b, c);
}

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

ReactDOM.render(
  <Carousel afterChange={onChange}>
    <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,
);

1

Scroll automatically

Timing of scrolling to the next card/picture.

import { Carousel } from 'antd';

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

ReactDOM.render(
  <Carousel autoplay>
    <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,
);

TopBottomLeftRight

1

Position

There are 4 position options available.

import { Carousel, Radio } from 'antd';

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

const PositionCarouselDemo = () => {
  const [dotPosition, setDotPosition] = React.useState('top');

  const handlePositionChange = ({ target: { value } }) => {
    setDotPosition(value);
  };

  return (
    <>
      <Radio.Group onChange={handlePositionChange} value={dotPosition} style={{ marginBottom: 8 }}>
        <Radio.Button value="top">Top</Radio.Button>
        <Radio.Button value="bottom">Bottom</Radio.Button>
        <Radio.Button value="left">Left</Radio.Button>
        <Radio.Button value="right">Right</Radio.Button>
      </Radio.Group>
      <Carousel dotPosition={dotPosition}>
        <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>
    </>
  );
};

ReactDOM.render(<PositionCarouselDemo />, mountNode);

1

Fade in

Slides use fade for transition.

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

API#

Property	Description	Type	Default
autoplay	Whether to scroll automatically	boolean	false
dotPosition	The position of the dots, which can be one of `top` `bottom` `left` `right`	string	`bottom`
dots	Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others	boolean \| { className?: string }	true
easing	Transition interpolation function name	string	`linear`
effect	Transition effect	`scrollx` \| `fade`	`scrollx`
afterChange	Callback function called after the current index changes	function(current)	-
beforeChange	Callback function called before the current index changes	function(from, to)	-

Methods#

Name	Description
goTo(slideNumber, dontAnimate)	Go to slide index, if dontAnimate=true, it happens without animation
next()	Change current slide to next slide
prev()	Change current slide to previous slide

Find more APIs in react-slick documentation.

FAQ#

How to add custom arrows?#

See #12479.