## Bootstrap - Carousel

We have styled all Bootstrap elements just as you want!

Toggle Code!

#### Basic Carousel

A slideshow component for cycling through elements, like a carousel.

Previous Next

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="http://placehold.it/1600x550?text=First+Slide" alt="First Slide" class="img-responsive">
            </div>
            <div class="item">
                <img src="http://placehold.it/1600x550?text=Second+Slide" alt="Second Slide" class="img-responsive">
            </div>
            <div class="item">
                <img src="http://placehold.it/1600x550?text=Third+Slide" alt="Third Slide" class="img-responsive">
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

#### With Captions

Add captions to your slides easily with the `.carousel-caption` element within any `.item`. Place just about any optional HTML within there and it will be automatically aligned and formatted.

### First Slide

And something about this slide

### Second Slide

And something about this slide

### Third Slide

And something about this slide

Previous Next

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="http://placehold.it/1600x550?text=First+Slide" alt="First Slide" class="img-responsive">
                <div class="carousel-caption">
                    <h3>First Slide</h3>
                    <p>And something about this slide</p>
                </div>
            </div>
            <div class="item">
                <img src="http://placehold.it/1600x550?text=Second+Slide" alt="Second Slide" class="img-responsive">
                <div class="carousel-caption">
                    <h3>Second Slide</h3>
                    <p>And something about this slide</p>
                </div>
            </div>
            <div class="item">
                <img src="http://placehold.it/1600x550?text=Third+Slide" alt="Third Slide" class="img-responsive">
                <div class="carousel-caption">
                    <h3>Third Slide</h3>
                    <p>And something about this slide</p>
                </div>
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

#### Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-interval=""`.

Name | type | default | description
--- | --- | --- | ---
interval | number | 5000 | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
pause | string | "hover" | Pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
wrap | boolean | true | Whether the carousel should cycle continuously or have hard stops.
keyboard | boolean | true | Whether the carousel should react to keyboard events.