tabler-ui/src/_includes/cards/carousel.html

Premium and Open Source dashboard template with responsive and high quality UI. For Free!

{% assign limit = include.limit | default: 5 %}
{% assign offset = include.offset | default: 0 %}
<div class="card">
	<div class="card-header">
		<h3 class="card-title">{{ include.title | default: 'Carousel' }}</h3>
	</div>
	<div class="card-body">
		<div id="{{ include.id }}" class="carousel slide" data-ride="carousel">
			{% if include.show-indicators %}
			<ol class="carousel-indicators">
				{% for i in (1..limit) %}
				<li data-target="#{{ include.id }}" data-slide-to="{{ forloop.index | minus: 1 }}" class="{% if forloop.first %}active{% endif %}"></li>
				{% endfor %}
			</ol>
			{% endif %}

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

					{% 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-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="#{{ include.id }}" role="button" data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
			{% endif %}
		</div>
	</div>
</div>