Add left/right navigation arrows to screenshots carousel

i18n/en.yaml

@@ -357,7 +357,7 @@
 - id: beta-alert-title
   translation: "Online version closed, beta access only"
 - id: beta-alert-text
-  translation: 'happyDomain is evolving: soon, continuously test your domains'' security and monitor every service exposed through DNS — with zero configuration. We''re rolling out this new version progressively to gather feedback and deliver the best possible service. <a href="/en/beta/">Learn more</a>.'
+  translation: 'happyDomain is evolving: soon, continuously test your domains'' security and monitor every service exposed through DNS, with zero configuration. We''re rolling out this new version progressively to gather feedback and deliver the best possible service. <a href="/en/beta/">Learn more</a>.'
 - id: beta-alert-button
   translation: "Join the beta"
 

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 }}