<div id="x-corp-carousel" class="carousel slide hero-slide hidden-xs" data-ride="carousel">
    <ol class="carousel-indicators">
        {% for slide in page.header.slides %}
        {% set indicatorClass = loop.index == 1 ? 'active' : '' %}
        <li data-target="#x-corp-carousel" data-slide-to="{{ loop.index - 1 }}" class="{{ indicatorClass }}"></li>
        {% endfor %}
    </ol>

    <div class="carousel-inner" role="listbox">
        {% for slide in page.header.slides %}
        {% set slideClass = loop.index == 1 ? 'item active' : 'item' %}
        <div class="{{ slideClass }}">
            {{ page.media.images[slide.background_image].html('', slide.background_image_description) }}

            <div class="carousel-caption">
                <h1>{{ slide.heading }}</h1>

                <p>{{ slide.description }}</p>
            </div>
        </div>
        {% endfor %}
    </div>

    <a class="left carousel-control" href="#x-corp-carousel" role="button" data-slide="prev">
        <i class="fa fa-angle-left" aria-hidden="true"></i>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#x-corp-carousel" role="button" data-slide="next">
        <i class="fa fa-angle-right" aria-hidden="true"></i>
        <span class="sr-only">Next</span>
    </a>
</div>
