# Carousel

走马灯用于轮流展示多个内容。
PC模式下，禁止用户鼠标拖动；移动模式下，用户可以通过拖动切换内容。

# Usage

## Basic

```jsx
import React from 'react'
import { Carousel } from 'react-icecream'
import './demo.less'

export default () => {
  return (
    <>
      <div className="wrapper gap">
        <Carousel>
          <div className="default-area">default carousel</div>
          <div className="default-area">is suitable for light content</div>
          <div className="default-area">with no arrows</div>
        </Carousel>
      </div>
      <div className="wrapper gap">
        <Carousel type="primary">
          <div className="primary-area">primary carousel</div>
          <div className="primary-area">is suitable for dark content</div>
          <div className="primary-area">with no arrows</div>
        </Carousel>
      </div>
      <div className="wrapper">
        <Carousel type="secondary">
          <div className="secondary-area">secondary carousel</div>
          <div className="secondary-area">is suitable for multiple scenes</div>
          <div className="secondary-area">with arrows</div>
        </Carousel>
      </div>
    </>
  )
}
```

## 自动播放
```jsx
import React from 'react'
import Carousel from '.'

export default () => {
  return (
    <Carousel autoplay>
      <div className="default-area">1</div>
      <div className="default-area">2</div>
      <div className="default-area">3</div>
    </Carousel>
  )
}
```

## 不同 size
```jsx
import React from 'react'
import { Carousel } from 'react-icecream'
import './demo.less'

export default () => {
  return (
    <>
      <div className="wrapper gap">
        <Carousel size="small">
          <div className="default-area">default carousel</div>
          <div className="default-area">is suitable for light content</div>
          <div className="default-area">with no arrows</div>
        </Carousel>
      </div>
      <div className="wrapper gap">
        <Carousel type="primary" size="small">
          <div className="primary-area">primary carousel</div>
          <div className="primary-area">is suitable for dark content</div>
          <div className="primary-area">with no arrows</div>
        </Carousel>
      </div>
      <div className="wrapper">
        <Carousel type="secondary" size="small">
          <div className="secondary-area">secondary carousel</div>
          <div className="secondary-area">is suitable for multiple scenes</div>
          <div className="secondary-area">with arrows</div>
        </Carousel>
      </div>
    </>
  )
}
```

<API></API>