windwiderstand/src/lib/components/Carousel.svelte

<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;
  let touchStartX = 0;

  function onTouchStart(e: TouchEvent) {
    touchStartX = e.touches[0].clientX;
  }
  function onTouchEnd(e: TouchEvent) {
    const dx = e.changedTouches[0].clientX - touchStartX;
    if (Math.abs(dx) < 40) return;
    if (dx < 0) next(); else prev();
  }

  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" ontouchstart={onTouchStart} ontouchend={onTouchEnd}>
      {#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>