Carousel 走马灯

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

何时使用

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

代码演示

基本

最简单的用法。

import React from 'react';
import ReactDOM from 'react-dom';
import { Carousel } from 'choerodon-ui';
​
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('container'));
​

垂直

垂直显示。

import React from 'react';
import ReactDOM from 'react-dom';
import { Carousel } from 'choerodon-ui';
​
ReactDOM.render(
  <Carousel vertical>
    <div>
      <h3 style={{ height: 150 }}>1</h3>
    </div>
    <div>
      <h3 style={{ height: 150 }}>2</h3>
    </div>
    <div>
      <h3 style={{ height: 150 }}>3</h3>
    </div>
    <div>
      <h3 style={{ height: 150 }}>4</h3>
    </div>
  </Carousel>,
  document.getElementById('container'),
);
​

渐显

切换效果为渐显。

import React from 'react';
import ReactDOM from 'react-dom';
import { Carousel } from 'choerodon-ui';
​
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('container'));
​

自动切换

定时切换下一张。

import React from 'react';
import ReactDOM from 'react-dom';
import { Carousel } from 'choerodon-ui';
​
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>,
  document.getElementById('container'));
​

API

方法

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