carousel component

src/_includes/cards/carousel.html

@@ -0,0 +1,44 @@
+{% 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 include.show-captions %} carousel-item-background{% endif %}{% 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-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>

src/assets/scss/dashboard/_carousel.scss

@@ -0,0 +1,9 @@
+.carousel-item-background:before {
+	content: '';
+	background: rgba(0, 0, 0, .5);
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}

src/assets/scss/dashboard/dashboard.scss

@@ -47,6 +47,7 @@
 @import 'tag';
 @import 'syntax';
 @import 'infobox';
+@import 'carousel';
 
 @import 'forms/custom-range';
 @import 'forms/custom-selectgroup';

src/carousel.html

@@ -0,0 +1,22 @@
+---
+title: Carousel
+layout: default
+menu: components.carousel
+---
+
+<div class="container">
+	<div class="row">
+		<div class="col-md-6">
+			{% include cards/carousel.html id="carousel-default" %}
+		</div>
+		<div class="col-md-6">
+			{% include cards/carousel.html id="carousel-indicators" title="Carousel with indicators" show-indicators=true offset=5 %}
+		</div>
+		<div class="col-md-6">
+			{% include cards/carousel.html id="carousel-controls" title="Carousel with controls" show-controls=true offset=10 %}
+		</div>
+		<div class="col-md-6">
+			{% include cards/carousel.html id="carousel-captions" title="Carousel with captions" show-captions=true show-controls=true offset=15 %}
+		</div>
+	</div>
+</div>

src/gallery.html

@@ -31,7 +31,7 @@ menu: gallery
 			{% assign user = site.data.users[forloop.index] %}
 			<div class="card p-3">
 				<a href="javascript:void(0)" class="mb-3">
-					<img src="{{ photo.small }}" alt="Photo by {{ user.name }} {{ user.surname }}" class="rounded">
+					<img src="{{ site.base }}/{{ photo.small }}" alt="Photo by {{ user.name }} {{ user.surname }}" class="rounded">
 				</a>
 				<div class="d-flex align-items-center px-2">
 					<div class="avatar avatar-md mr-3" style="background-image: url({{ user.photo }})"></div>