• 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 是否自动切换 boolean false
    beforeChange 切换面板的回调 function(from, to)
    dots 是否显示面板指示点 boolean true
    easing 动画效果 string linear
    effect 动画效果函数,可取 scrollx, fade string scrollx
    vertical 垂直显示 boolean false

    方法

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

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