
<div id="slider" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        {% for photo in slider_photos %}
            <li data-target="#slider"
                data-slide-to="{{ forloop.counter0 }}"
                {% if forloop.first %}class="active"{% endif %}></li>
        {% endfor %}
    </ol>
    <div class="carousel-inner" role="listbox">
        {% for photo in slider_photos %}
            <div class="item {% if forloop.first %}active{% endif %}">
                <img src="{{ photo.file.url }}" alt="{{ photo.title }}">
            </div>
        {% endfor %}
    </div>

    <a class="left carousel-control" href="#slider"
       role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"
              aria-hidden="true"></span>
    </a>
    <a class="right carousel-control" href="#slider"
       role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"
              aria-hidden="true"></span>
    </a>
</div>
