Carousel走马灯
旋转木马，一组轮播的区域。
何时使用#
当有一组平级的内容。
当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
常用于一组图片或卡片轮播。
代码演示
最简单的用法。
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 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;
}位置有 4 个方向。
import { Carousel, Radio } from 'antd';
class PositionCarouselDemo extends React.Component {
state = {
dotPosition: 'top',
};
handlePositionChange = ({ target: { value: dotPosition } }) => this.setState({ dotPosition });
render() {
const { dotPosition } = this.state;
return (
<div>
<Radio.Group
onChange={this.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>1</h3>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
</Carousel>
</div>
);
}
}
ReactDOM.render(<PositionCarouselDemo />, 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;
}API#
| 参数 | 说明 | 类型 | 默认值 | 版本 | |
|---|---|---|---|---|---|
| afterChange | 切换面板的回调 | function(current) | 无 | ||
| autoplay | 是否自动切换 | boolean | false | ||
| beforeChange | 切换面板的回调 | function(from, to) | 无 | ||
| dotPosition | 面板指示点位置，可选 top bottom left right | string | bottom | 3.17.0 | 3.17.0 |
| dots | 是否显示面板指示点 | boolean | true | ||
| easing | 动画效果 | string | linear | ||
| effect | 动画效果函数，可取 scrollx, fade | string | scrollx |
方法#
| 名称 | 描述 | |
|---|---|---|
| goTo(slideNumber, dontAnimate) | 切换到指定面板, dontAnimate = true 时，不使用动画 | 3.9.3 |
| next() | 切换到下一面板 | |
| prev() | 切换到上一面板 |