tabler/core/pages/_includes/ui/carousel.html

{% assign limit = include.limit | default: 5 %}
{% assign offset = include.offset | default: 0 %}
{% assign photos = site.data.photos | where: "horizontal", true %}
{% assign id = include.id | default: "carousel" %}
<div id="{{ id }}" class="carousel slide{% if include.fade %} carousel-fade{% endif %}" data-bs-ride="carousel">
   {% if include.indicators %}
   <div class="carousel-indicators{% if include.indicators-vertical %} carousel-indicators-vertical{% endif %}{% if include.indicators-dot %} carousel-indicators-dot{% elsif include.indicators-thumb %} carousel-indicators-thumb{% endif %}">
	   {% for photo in photos limit: limit offset: offset %}
      <button type="button" data-bs-target="#{{ id }}" data-bs-slide-to="{{ forloop.index | minus: 1 }}" class="{%if include.indicators-thumb-ratio %} ratio ratio-4x3{% endif %}{% if forloop.first %} active{% endif %}"{% if include.indicators-thumb %} style="background-image: url({{ site.base }}/static/photos/{{ photo.file }})"{% endif %}></button>
      {% endfor %}
   </div>
   {% 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.captions %}
         <div class="carousel-caption-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.controls %}
   <a class="carousel-control-prev" href="#{{ 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="#{{ 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>