# Carousel

Adding sections just requires adding additional `Carousel.Pane` instances to the component tree.

```
      <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.Pane>
          <div style={{ ...boxStyles, backgroundColor: 'pink' }}>
            <h1 style={{ fontSize: '60px', color: 'white' }}>4</h1>
          </div>
        </Carousel.Pane>
        <Carousel.Pane>
          <div style={{ ...boxStyles, backgroundColor: 'purple' }}>
            <h1 style={{ fontSize: '60px', color: 'white' }}>5</h1>
          </div>
        </Carousel.Pane>
      </Carousel>
```