{% extends 'page_with_button.html' %}

{% block template_content_head %}
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            {% for item in page.images %}
                {% set image = item.split('|') %}
                    <div class="item {% if loop.first %} active {% endif %}">
                        <img class="center-block carousel-image" src="{{ image[1] }}" alt="{{ image[0] }}">
                        <div class="carousel-caption d-none d-md-block">
                            <h3>{{ image[0] }}</h3>
                        </div>
                    </div>
             {% endfor %}
        </div>
     <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
     </a>
     <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
     </a>

    </div>

{% endblock %}