Carousel走马灯

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

何时使用

  • 当有一组平级的内容。

  • 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。

  • 常用于一组图片或卡片轮播。

代码演示

Carousel 走马灯 - 图1

基本

最简单的用法。

  1. import { Carousel } from 'choerodon-ui';
  3. function onChange(a, b, c) {
  4.   console.log(a, b, c);
  5. }
  7. ReactDOM.render(
  8.   <Carousel afterChange={onChange}>
  9.     <div><h3>1</h3></div>
  10.     <div><h3>2</h3></div>
  11.     <div><h3>3</h3></div>
  12.     <div><h3>4</h3></div>
  13.   </Carousel>,
  14.   mountNode);
  1. /* For demo */
  2. .c7n-carousel .slick-slide {
  3.   text-align: center;
  4.   height: 160px;
  5.   line-height: 160px;
  6.   background: #364d79;
  7.   overflow: hidden;
  8. }
  10. .c7n-carousel .slick-slide h3 {
  11.   color: #fff;
  12. }

Carousel 走马灯 - 图2

渐显

切换效果为渐显。

  1. import { Carousel } from 'choerodon-ui';
  3. ReactDOM.render(
  4.   <Carousel effect="fade">
  5.     <div><h3>1</h3></div>
  6.     <div><h3>2</h3></div>
  7.     <div><h3>3</h3></div>
  8.     <div><h3>4</h3></div>
  9.   </Carousel>,
  10.   mountNode);
  1. /* For demo */
  2. .c7n-carousel .slick-slide {
  3.   text-align: center;
  4.   height: 160px;
  5.   line-height: 160px;
  6.   background: #364d79;
  7.   overflow: hidden;
  8. }
  10. .c7n-carousel .slick-slide h3 {
  11.   color: #fff;
  12. }

Carousel 走马灯 - 图3

垂直

垂直显示。

  1. import { Carousel } from 'choerodon-ui';
  3. ReactDOM.render(
  4.   <Carousel vertical>
  5.     <div><h3>1</h3></div>
  6.     <div><h3>2</h3></div>
  7.     <div><h3>3</h3></div>
  8.     <div><h3>4</h3></div>
  9.   </Carousel>,
  10.   mountNode);
  1. /* For demo */
  2. .c7n-carousel .slick-slide {
  3.   text-align: center;
  4.   height: 160px;
  5.   line-height: 160px;
  6.   background: #364d79;
  7.   overflow: hidden;
  8. }
  10. .c7n-carousel .slick-slide h3 {
  11.   color: #fff;
  12. }

Carousel 走马灯 - 图4

自动切换

定时切换下一张。

  1. import { Carousel } from 'choerodon-ui';
  3. ReactDOM.render(
  4.   <Carousel autoplay>
  5.     <div><h3>1</h3></div>
  6.     <div><h3>2</h3></div>
  7.     <div><h3>3</h3></div>
  8.     <div><h3>4</h3></div>
  9.   </Carousel>,
  10.   mountNode);
  1. /* For demo */
  2. .c7n-carousel .slick-slide {
  3.   text-align: center;
  4.   height: 160px;
  5.   line-height: 160px;
  6.   background: #364d79;
  7.   overflow: hidden;
  8. }
  10. .c7n-carousel .slick-slide h3 {
  11.   color: #fff;
  12. }

API

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

方法

名称描述
goTo(slideNumber)切换到指定面板
next()切换到下一面板
prev()切换到上一面板

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