<div id=“carousel-{{ include.project_name | url_encode }}” class=“carousel slide” data-ride=“carousel”>

{% if include.images.size > 1 %}
<ol class="carousel-indicators">
  {% for image in include.images %}
  <li data-target="#carousel-{{ include.project_name | url_encode }}" data-slide-to="{{ forloop.index0 }}" class="{% if forloop.first%}active{% endif %}"></li>
  {% endfor %}
</ol>
{% endif %}

<div class="carousel-inner">
  {% for image in include.images %}
  <div class="carousel-item {% if forloop.first%}active{% endif %}">
    <img class="d-block w-100" src="{{ image }}" alt="{{ include.project_name }} photo">
  </div>
  {% endfor %}
</div>

{% if include.images.size > 1 %}
<a class="carousel-control-prev" href="#carousel-{{ include.project_name | url_encode }}" role="button" data-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-{{ include.project_name | url_encode }}" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>
{% endif %}

</div>