{% assign limit = include.limit | default: 5 %}
{% assign offset = include.offset | default: 0 %}
{% assign photos = site.data.photos | where: "horizontal", true %}
<div id="{{ include.id }}" class="carousel slide" data-bs-ride="carousel">
   {% if include.show-indicators %}
   <ol class="carousel-indicators">
      {% for i in (1..limit) %}
      <li data-bs-target="#{{ include.id }}" data-bs-slide-to="{{ forloop.index | minus: 1 }}" class="{% if forloop.first %}active{% endif %}"></li>
      {% endfor %}
   </ol>
   {% endif %}

   <div class="carousel-inner">
      {% for photo in photos limit: limit offset: offset %}
      <div class="carousel-item{% if forloop.first %} active{% endif %}">
         <img class="d-block w-100" alt="" src="{{ site.base }}/static/photos/{{ photo.file }}">

         {% if include.show-captions %}
         <div class="carousel-item-background d-none d-md-block"></div>
         <div class="carousel-caption d-none d-md-block">
            <h3>Slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
         </div>
         {% endif %}
      </div>
      {% endfor %}
   </div>

   {% if include.show-controls %}
   <a class="carousel-control-prev" href="#{{ include.id }}" role="button" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
   </a>
   <a class="carousel-control-next" href="#{{ include.id }}" role="button" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
   </a>
   {% endif %}
</div>