Adds gallery / carousel for app images

_includes/app_carousel.html

@@ -0,0 +1,26 @@
+<section id='image-carousel' class='splide'>
+    <div class='splide__track'>
+        <ul class='splide__list' style='list-style-type: none; list-style: none;'>
+        {% for image in site.static_files %}
+            {% if image.path contains 'appgallery/' %}
+            <li class='splide__slide'>
+                <img src="{{ image.path | relative_url }}" alt="" />
+            </li>
+            {% endif %}
+        {% endfor %}
+        </ul>
+    </div>
+</section>
+
+<script>
+document.addEventListener( 'DOMContentLoaded', function () {
+    new Splide('#image-carousel', {
+        type: 'loop',
+        perPage: 3,
+        autoPlay: true,
+        pagination: false,
+        // pagination: false,
+        // focus: 'center',
+    }).mount();
+});
+</script>

_includes/base/head.html

@@ -2,9 +2,12 @@
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
+<link rel="stylesheet" href="{{ '/assets/splide/css/splide.min.css' | relative_url }}">
 <link rel="stylesheet" href="{{ '/assets/index.css' | relative_url }}">
 <link rel="shortcut icon" type="image/png" href="{{ '/assets/icon/favicon.ico' | relative_url }}">
 
+<script src="{{ '/assets/splide/js/splide.min.js' | relative_url }}"></script>
+
 <title>{{ site.title }}{% if page.title %} - {{ page.title }}{% endif %}</title>
 <meta itemprop="description" name="description"
     content="{% if page.description %}{{ page.description | truncate: 160 }}{% else %}{{ site.description | truncate: 160  }}{% endif %}" />