• Carousel走马灯
    • 何时使用
    • 代码演示
    • API
    • 方法

    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 rightstringbottom3.17.0
    dots是否显示面板指示点booleantrue
    easing动画效果stringlinear
    effect动画效果函数，可取 scrollx, fadestringscrollx

    方法

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

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