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 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#
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
afterChange | 切换面板的回调 | function(current) | 无 |
autoplay | 是否自动切换 | boolean | false |
beforeChange | 切换面板的回调 | function(from, to) | 无 |
dots | 是否显示面板指示点 | boolean | true |
easing | 动画效果 | string | linear |
effect | 动画效果函数,可取 scrollx, fade | string | scrollx |
vertical | 垂直显示 | boolean | false |