Carousel 走马灯

旋转木马，一组轮播的区域。

何时使用

当有一组平级的内容。
当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
常用于一组图片或卡片轮播。

API

参数	说明	类型	默认值
effect	动画效果函数，可取 scrollx, fade	String	scrollx
arrow	是否显示前后翻页箭头	Boolean	false
dots	是否显示面板指示点	Boolean	true
vertical	垂直显示	Boolean	false
autoplay	是否自动切换	Boolean	false
easing	动画效果	String	linear
onChange	切换面板的回调	Function	无

组件演示

var Carousel = antd.Carousel;

React.render(
  <Carousel>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
  </Carousel>
, document.getElementById('components-carousel-demo-basic'));

基本

最简单的用法。

var Carousel = antd.Carousel;

React.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>
, document.getElementById('components-carousel-demo-fade'));

渐显

切换效果为渐显。

var Carousel = antd.Carousel;

React.render(
  <Carousel vertical="true">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
  </Carousel>
, document.getElementById('components-carousel-demo-vertical'));

垂直

垂直显示。

var Carousel = antd.Carousel;

React.render(
  <Carousel autoplay="true">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
  </Carousel>
, document.getElementById('components-carousel-demo-autoplay'));

自动切换

定时切换下一张。