Add left/right navigation arrows to screenshots carousel

layouts/partials/carousel.html

@@ -1,28 +1,98 @@
 {{ if isset .Site.Params "carousel" }} {{ if gt (len .Site.Params.carousel) 0 }}
-<section
-    id="screenshots"
-    class="text-light p-4 pt-5 d-flex flex-nowrap align-items-center"
-    style="
-        background-color: var(--hd-plum-600);
-        gap: 1em 1em;
-        overflow-x: scroll;
-    "
->
-    {{ range sort .Site.Params.carousel "weight" }}
-    <figure class="my-5 me-5 text-center" style="min-width: 65vw">
-        <a href="{{ .image }}">
-            <img
-                class="rounded img-thumbnail"
-                src="{{ .image }}"
-                alt="{{ .title }}"
-                loading="lazy"
-                style="max-height: 80vh"
-            />
-        </a>
-        <figcaption class="mt-2 text-center">
-            {{ .description | markdownify }}
-        </figcaption>
-    </figure>
-    {{ end }}
-</section>
+<div class="carousel-wrap position-relative">
+    <button
+        class="carousel-btn carousel-btn-left"
+        type="button"
+        aria-label="Défiler à gauche"
+        data-carousel-dir="-1"
+    >
+        <i class="bi bi-chevron-left"></i>
+    </button>
+
+    <section
+        id="screenshots"
+        class="text-light p-4 pt-5 d-flex flex-nowrap align-items-center"
+        style="
+            background-color: var(--hd-plum-600);
+            gap: 1em 1em;
+            overflow-x: scroll;
+        "
+    >
+        {{ range sort .Site.Params.carousel "weight" }}
+        <figure class="my-5 me-5 text-center" style="min-width: 65vw">
+            <a href="{{ .image }}">
+                <img
+                    class="rounded img-thumbnail"
+                    src="{{ .image }}"
+                    alt="{{ .title }}"
+                    loading="lazy"
+                    style="max-height: 80vh"
+                />
+            </a>
+            <figcaption class="mt-2 text-center">
+                {{ .description | markdownify }}
+            </figcaption>
+        </figure>
+        {{ end }}
+    </section>
+
+    <button
+        class="carousel-btn carousel-btn-right"
+        type="button"
+        aria-label="Défiler à droite"
+        data-carousel-dir="1"
+    >
+        <i class="bi bi-chevron-right"></i>
+    </button>
+</div>
+
+<style>
+    .carousel-wrap .carousel-btn {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 10;
+        background: var(--hd-plum-600);
+        border: 2px solid rgba(255, 255, 255, 0.85);
+        border-radius: 50%;
+        width: 3rem;
+        height: 3rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
+        cursor: pointer;
+        font-size: 1.4rem;
+        color: white;
+        transition: background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
+    }
+
+    .carousel-wrap .carousel-btn:hover {
+        background: var(--hd-plum-700, #4a1f5c);
+        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
+        transform: translateY(-50%) scale(1.08);
+    }
+
+    .carousel-wrap .carousel-btn-left {
+        left: 0.5rem;
+    }
+
+    .carousel-wrap .carousel-btn-right {
+        right: 0.5rem;
+    }
+</style>
+
+<script>
+    (function () {
+        var scroller = document.getElementById("screenshots");
+        if (!scroller) return;
+        var buttons = scroller.parentNode.querySelectorAll(".carousel-btn");
+        buttons.forEach(function (btn) {
+            btn.addEventListener("click", function () {
+                var dir = parseInt(btn.getAttribute("data-carousel-dir"), 10);
+                scroller.scrollBy({ left: dir * scroller.clientWidth * 0.7, behavior: "smooth" });
+            });
+        });
+    })();
+</script>
 {{ end }} {{ end }}