Simpler gallery

- use splide.js
- iterate though a directory automatically

_includes/app_carousel.html

@@ -1,61 +0,0 @@
-{% with image_count=14 %}
-{% include "carousel_start.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_1.jpg", alt="App screenshot", active=True%}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_2.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_3.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_4.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_5.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_6.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_7.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_8.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_9.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_10.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_11.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_12.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_13.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="app/screenshots/screen_14.jpg", alt="App screenshot" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% include "carousel_end.html" %}

_includes/carousel.html

@@ -0,0 +1,27 @@
+<div class='splide'>
+    <div class='splide__track'>
+        <ul class='splide__list'>
+            {% for img in listimages(directory) %}
+            {% with src=img %}
+            {% include "splide_image.html" %}
+            {% endwith %}
+            {% endfor %}
+        </ul>
+    </div>
+</div>
+
+<script>
+	document.addEventListener( 'DOMContentLoaded', function () {
+		new Splide(
+            '.splide', {
+                type: 'loop',
+                perPage: 2,
+                autoplay: true,
+                pagination: false,
+                // cover: true,
+                height: '25rem',
+                focus: 'center',
+            }
+        ).mount();
+	} );
+</script>

_includes/carousel_end.html

@@ -1,14 +0,0 @@
-
-    </div>
-
-    <!-- Left and right controls -->
-      <a class="left carousel-control" href="#image-carousel" data-slide="prev">
-        <span class="fas fa-chevron-left"></span>
-        <span class="sr-only">Previous</span>
-      </a>
-      <a class="right carousel-control" href="#image-carousel" data-slide="next">
-        <span class="fas fa-chevron-right"></span>
-        <span class="sr-only">Next</span>
-      </a>
-    </div>
-  </div>

_includes/carousel_start.html

@@ -1,14 +0,0 @@
-<div class="container carousel-container">
-    <div id="image-carousel" class="carousel slide" data-ride="carousel">
-
-      <!-- Indicators -->
-      <ol class="carousel-indicators">
-
-        {% for idx in range(image_count) %}
-        <li data-target="#image-carousel" data-slide-to="{{ idx }}" {% if idx == 0 %}class="active"{% endif %}></li>
-        {% endfor %}
-      </ol>
-  
-      <!-- Wrapper for slides -->
-      <div class="carousel-inner">
-  

_includes/index_carousel.html

@@ -1,49 +0,0 @@
-{% with image_count=11 %}
-{% include "carousel_start.html" %}
-{% endwith %}
-
-{% with src="index/part_category.png", min_height="400px", max_height="400px", alt="Part Categories", active=True %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/part_stock.png", min_height="400px", max_height="400px", alt="Part Stock" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/part_suppliers.png", min_height="400px", max_height="400px", alt="Part Suppliers" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/stock_item.png", min_height="400px", max_height="400px", alt="Stock Item" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/stock_location.png", min_height="400px", max_height="400px", alt="Stock Location" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/stock_location_2.png", min_height="400px", max_height="400px", alt="Stock Location" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/suppliers.png", min_height="400px", max_height="400px", alt="Suppliers" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/part_admin.png", min_height="400px", max_height="400px", alt="Admin Interface" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/category_params.png", min_height="400px", max_height="400px", alt="Part Parameters" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/build_outputs.png", min_height="400px", max_height="400px", alt="Build Orders" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% with src="index/bom_add_item.png", min_height="400px", max_height="400px", alt="Bill of Materials" %}
-{% include "carousel_img.html" %}
-{% endwith %}
-
-{% include "carousel_end.html" %}

_includes/splide_image.html

@@ -10,6 +10,6 @@
 {% set img_url = assets  + '/images/' + src %}
 {% endif %}
 
-<div class='item{% if active %} active{% endif %}'>
-    <img class='center' src='{{ img_url }}' alt='{{ alt }}' style='{% if min_height %}min-height: {{ min_height }}; {% endif %}{% if max_height %}max-height: {{ max_height }}; {% endif %}'>
-</div>
+<li class='splide__slide'>
+    <img src='{{ img_url }}'>
+</li>