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
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;
}
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;
}
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;
}
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 |
---|---|---|---|
afterChange | Callback function called after the current index changes | function(current) | - |
autoplay | Whether to scroll automatically | boolean | false |
beforeChange | Callback function called before the current index changes | function(from, to) | - |
dots | Whether to show the dots at the bottom of the gallery | boolean | true |
easing | Transition interpolation function name | string | linear |
effect | Transition effect | scrollx | fade | scrollx |
vertical | Whether to use a vertical display | boolean | false |
Methods#
Name | Description |
---|---|
goTo(slideNumber) | Change current slide to given slide number |
next() | Change current slide to next slide |
prev() | Change current slide to previous slide |
For more info on the parameters, refer to the https://github.com/akiran/react-slick