{% if object.carousel %}
    <div id="carousel-{{ content_block.id }}" class="{{ css_classes }} carousel slide" data-ride="carousel">
        {% with carousel_images=object.carousel.carousel_images.select_related.all %}
        <!-- Indicators -->
            <ol class="carousel-indicators">
                {% for image in carousel_images %}
                    <li data-target="#carousel-{{ content_block.id }}" data-slide-to="{{ forloop.counter0 }}" {% if forloop.first %}class="active"{% endif %}></li>
                    <h2>{{ image.title }}</h2>
                    <p>{{ image.subtitle }}</p>
                {% endfor %}
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                {% for image in carousel_images %}
                    <div class="item {% if forloop.first %}active{% endif %}">
                        <img src="{{ image.image.file.url }}" width="{{ image.image.image_width }}" height="{{ image.image.image_height }}" alt="" />
                    </div>
                {% endfor %}
            </div>
        {% endwith %}

        <!-- Controls -->
        <a class="left carousel-control" href="#" data-target="#carousel-{{ content_block.id }}" 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="#" role="button" data-target="#carousel-{{ content_block.id }}"  data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
{% endif %}
