{% load cms_tags thumbnail %}

<div id="{{ instance.get_html_id }}" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
    {% for plugin in instance.child_plugin_instances %}
        <li data-target="#{{ instance.get_html_id }}" {% if forloop.first %}class="active"{% endif %} data-slide-to="{{ forloop.counter0 }}"></li>
    {% endfor %}
    </ol>

    <div class="carousel-inner" role="listbox">
    {% for plugin in instance.child_plugin_instances %}
        {% with parentloop=forloop %}
            {% render_plugin plugin %}
        {% endwith %}
    {% endfor %}
    </div>

    <a class="left carousel-control" href="#{{ instance.get_html_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="#{{ instance.get_html_id }}" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
