• Carousel 走马灯

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

    何时使用

    代码演示

    最简单的用法。
    expand code expand code
    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>,
      mountNode);
    
    切换效果为渐显。
    expand code expand code
    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>,
      mountNode);
    
    垂直显示。
    expand code expand code
    import { Carousel } from 'choerodon-ui';
    
    ReactDOM.render(
      <Carousel vertical>
        <div><h3>1</h3></div>
        <div><h3>2</h3></div>
        <div><h3>3</h3></div>
        <div><h3>4</h3></div>
      </Carousel>,
      mountNode);
    
    定时切换下一张。
    expand code expand code
    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>,
      mountNode);
    

    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