# Carousel

Allows fully responsive Carousel display. Just nest `Carousel.Pane` inside your `Carousel` component. Pass as children any items you want to show up in a `Carousel.Pane`.

One caveat, is that `Carousel.Pane` children must be the same size, to allow for the carousel's responsiveness. You can pass sizing directly to the `Carousel.Pane` children if need be, as shown in the example.

```
<Carousel>
  <Carousel.Pane>
    <div style={{ ...boxStyles, backgroundColor: 'blue' }}>
      <h1 style={{ fontSize: '60px', color: 'white' }}>1</h1>
    </div>
  </Carousel.Pane>
  <Carousel.Pane>
    <div style={{ ...boxStyles, backgroundColor: 'red' }}>
      <h1 style={{ fontSize: '60px', color: 'white' }}>2</h1>
    </div>
  </Carousel.Pane>
  <Carousel.Pane>
    <div style={{ ...boxStyles, backgroundColor: 'orange' }}>
      <h1 style={{ fontSize: '60px', color: 'white' }}>3</h1>
    </div>
  </Carousel.Pane>
</Carousel>
```