Carousel走马灯

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

何时使用

  • 当有一组平级的内容。

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

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

代码演示

Carousel走马灯 - 图1

基本

最简单的用法。

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

Carousel走马灯 - 图2

自动切换

定时切换下一张。

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

Carousel走马灯 - 图3

位置

位置有 4 个方向。

  1. import { Carousel, Radio } from 'antd';
  3. class PositionCarouselDemo extends React.Component {
  4.   state = {
  5.     dotPosition: 'top',
  6.   };
  8.   handlePositionChange = ({ target: { value: dotPosition } }) => this.setState({ dotPosition });
  10.   render() {
  11.     const { dotPosition } = this.state;
  12.     return (
  13.       <div>
  14.         <Radio.Group
  15.           onChange={this.handlePositionChange}
  16.           value={dotPosition}
  17.           style={{ marginBottom: 8 }}
  18.         >
  19.           <Radio.Button value="top">Top</Radio.Button>
  20.           <Radio.Button value="bottom">Bottom</Radio.Button>
  21.           <Radio.Button value="left">Left</Radio.Button>
  22.           <Radio.Button value="right">Right</Radio.Button>
  23.         </Radio.Group>
  24.         <Carousel dotPosition={dotPosition}>
  25.           <div>
  26.             <h3>1</h3>
  27.           </div>
  28.           <div>
  29.             <h3>2</h3>
  30.           </div>
  31.           <div>
  32.             <h3>3</h3>
  33.           </div>
  34.           <div>
  35.             <h3>4</h3>
  36.           </div>
  37.         </Carousel>
  38.       </div>
  39.     );
  40.   }
  41. }
  43. ReactDOM.render(<PositionCarouselDemo />, mountNode);
  1. /* For demo */
  2. .ant-carousel .slick-slide {
  3.   text-align: center;
  4.   height: 160px;
  5.   line-height: 160px;
  6.   background: #364d79;
  7.   overflow: hidden;
  8. }
  10. .ant-carousel .slick-slide h3 {
  11.   color: #fff;
  12. }

Carousel走马灯 - 图4

渐显

切换效果为渐显。

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

API

参数说明类型默认值版本
afterChange切换面板的回调function(current)无
autoplay是否自动切换booleanfalse
beforeChange切换面板的回调function(from, to)无
dotPosition面板指示点位置，可选 top bottom left rightstringbottom
dots是否显示面板指示点，如果为 object 则同时可以指定 dotsClass 或者boolean | { className?:string }true
easing动画效果stringlinear
effect动画效果函数，可取 scrollx, fadestringscrollx

方法

名称描述
goTo(slideNumber, dontAnimate)切换到指定面板, dontAnimate = true 时，不使用动画
next()切换到下一面板
prev()切换到上一面板

更多 API 可参考：https://react-slick.neostack.com/docs/api