feat: add carousel design to PostOverview; extract shared Carousel component

- New Carousel.svelte: index-fade, arrows, dots, optional auto-rotate - QuoteCarouselBlock refactored to use Carousel - PostOverviewBlock: carousel design variant added - CMS schema: "carousel" added to post_overview design enum Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-16 14:27:31 +02:00
parent a1dcedd855
commit 41dfbb2930
4 changed files with 138 additions and 109 deletions
@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import type { Snippet } from "svelte";
+  import Icon from "@iconify/svelte";
+  import "$lib/iconify-offline";
+
+  let {
+    count,
+    item,
+    ariaLabel = "Karussell",
+    autoRotateMs = 0,
+    showArrows = true,
+  }: {
+    count: number;
+    item: Snippet<[index: number]>;
+    ariaLabel?: string;
+    autoRotateMs?: number;
+    showArrows?: boolean;
+  } = $props();
+
+  let index = $state(0);
+  let paused = $state(false);
+  let timer: ReturnType<typeof setInterval> | null = null;
+
+  function prev() {
+    if (count > 0) index = (index - 1 + count) % count;
+  }
+  function next() {
+    if (count > 0) index = (index + 1) % count;
+  }
+
+  function startTimer() {
+    stopTimer();
+    if (!autoRotateMs || paused || count < 2) return;
+    timer = setInterval(() => { index = (index + 1) % count; }, autoRotateMs);
+  }
+  function stopTimer() {
+    if (timer) { clearInterval(timer); timer = null; }
+  }
+
+  $effect(() => {
+    void autoRotateMs; void paused; void count;
+    startTimer();
+    return stopTimer;
+  });
+
+  onMount(startTimer);
+  onDestroy(stopTimer);
+</script>
+
+<div
+  role="region"
+  aria-roledescription="carousel"
+  aria-label={ariaLabel}
+  onmouseenter={() => (paused = true)}
+  onmouseleave={() => (paused = false)}
+>
+  <div class="flex items-center gap-1.5 sm:gap-2">
+    {#if showArrows && count > 1}
+      <button
+        type="button"
+        onclick={prev}
+        aria-label="Vorheriger Eintrag"
+        class="shrink-0 inline-flex items-center justify-center size-7 rounded-full bg-white/90 border border-stein-200 shadow-sm hover:bg-white hover:border-wald-700 transition"
+      >
+        <Icon icon="mdi:chevron-left" class="size-4" aria-hidden="true" />
+      </button>
+    {/if}
+
+    <div class="grid flex-1 min-w-0">
+      {#each { length: count } as _, i}
+        <div
+          class="col-start-1 row-start-1 transition-opacity duration-300 {i === index
+            ? 'opacity-100'
+            : 'pointer-events-none opacity-0'}"
+          aria-hidden={i !== index}
+        >
+          {@render item(i)}
+        </div>
+      {/each}
+    </div>
+
+    {#if showArrows && count > 1}
+      <button
+        type="button"
+        onclick={next}
+        aria-label="Nächster Eintrag"
+        class="shrink-0 inline-flex items-center justify-center size-7 rounded-full bg-white/90 border border-stein-200 shadow-sm hover:bg-white hover:border-wald-700 transition"
+      >
+        <Icon icon="mdi:chevron-right" class="size-4" aria-hidden="true" />
+      </button>
+    {/if}
+  </div>
+
+  {#if count > 1}
+    <div class="mt-3 flex justify-center gap-1.5" role="tablist">
+      {#each { length: count } as _, i}
+        <button
+          type="button"
+          role="tab"
+          aria-selected={i === index}
+          aria-label={`Eintrag ${i + 1}`}
+          onclick={() => (index = i)}
+          class="size-2 rounded-full transition-colors {i === index
+            ? 'bg-wald-700'
+            : 'bg-stein-300 hover:bg-stein-400'}"
+        ></button>
+      {/each}
+    </div>
+  {/if}
+</div>