{% with collection.get_published_images as collection_images %}
    {% if collection_images %}
        <div id="carousel-{{ collection.identifier }}" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                {% for image in collection_images %}
                    <li data-target="#carousel-{{ collection.identifier }}" data-slide-to="{{ forloop.counter0 }}" {% if forloop.first %}class="active"{% endif %}></li>
                {% endfor %}
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                {% for image in collection_images %}
                    <div class="item {% if forloop.first %}active{% endif %}">
                        <a href="{{ image.url }}">
                            <img src="{{ image.image.url }}" alt="{{ image.alt_text }}">
                        </a>
                        {% if image.caption or image.caption_headline %}
                            <div class="carousel-caption">
                                {% if image.caption_headline %}
                                    <h3>{{ image.caption_headline }}</h3>
                                {% endif %}
                                {% if image.caption %}
                                    <p>{{ image.caption }}</p>
                                {% endif %}
                            </div>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>

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