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
Basic usage.
import { Carousel } from 'antd';
function onChange(a, b, c) {
console.log(a, b, c);
}
ReactDOM.render(
<Carousel afterChange={onChange}>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
</Carousel>
, mountNode);/* For demo */
.ant-carousel .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel .slick-slide h3 {
color: #fff;
}Slides use fade for transition.
import { Carousel } from 'antd';
ReactDOM.render(
<Carousel effect="fade">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
</Carousel>
, mountNode);/* For demo */
.ant-carousel .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel .slick-slide h3 {
color: #fff;
}Vertical pagination.
import { Carousel } from 'antd';
ReactDOM.render(
<Carousel vertical>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
</Carousel>
, mountNode);/* For demo */
.ant-carousel .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel .slick-slide h3 {
color: #fff;
}Timing of scrolling to the next card/picture.
import { Carousel } from 'antd';
ReactDOM.render(
<Carousel autoplay>
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
</Carousel>
, mountNode);/* For demo */
.ant-carousel .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel .slick-slide h3 {
color: #fff;
}API#
| Property | Description | Type | Default |
|---|---|---|---|
| effect | Transition effect | scrollx | fade | scrollx |
| dots | Whether to show the dots at the bottom of the gallery | boolean | true |
| vertical | Whether to use a vertical display | boolean | false |
| autoplay | Whether to scroll automatically | boolean | false |
| easing | Transition interpolation function name | string | linear |
| beforeChange | Callback function called before the current index changes | function(from, to) | - |
| afterChange | Callback function called after the current index changes | function(current) | - |
For more info on the parameters, refer to the https://github.com/akiran/react-slick