Carousel 走马灯

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

何时使用#

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

API#

参数	说明	类型	默认值
effect	动画效果函数，可取 scrollx, fade	String	scrollx
dots	是否显示面板指示点	Boolean	true
vertical	垂直显示	Boolean	false
autoplay	是否自动切换	Boolean	false
easing	动画效果	String	linear
beforeChange	切换面板的回调	function(from, to)	无
afterChange	切换面板的回调	function(current)	无

更多参数可参考：https://github.com/akiran/react-slick

代码演示

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

基本

最简单的用法。

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

渐显

切换效果为渐显。

import { Carousel } from 'antd';

ReactDOM.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'));

垂直

垂直显示。

import { Carousel } from 'antd';

ReactDOM.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'));

自动切换

定时切换下一张。