mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
41 lines
2.2 KiB
HTML
41 lines
2.2 KiB
HTML
{% assign limit = include.limit | default: 5 %}
|
|
{% assign offset = include.offset | default: 0 %}
|
|
{% assign filtered-photos = photos | where: "horizontal", true %}
|
|
{% assign carousel-id = include.id | default: "carousel" %}
|
|
<div id="carousel-{{ carousel-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 filtered-photos limit: limit offset: offset %}
|
|
<button type="button" data-bs-target="#carousel-{{ carousel-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({{ page | relative }}/static/photos/{{ photo.file }})"{% endif %}></button>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="carousel-inner">
|
|
{% for photo in filtered-photos limit: limit offset: offset %}
|
|
<div class="carousel-item{% if forloop.first %} active{% endif %}">
|
|
<img class="d-block w-100" alt="" src="{{ page | relative }}/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="#carousel-{{ carousel-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="#carousel-{{ carousel-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>
|