Carousel

A sliding, one-at-a-time viewport with prev/next controls + dot indicators. Data-driven (items + a slide snippet); bind:index, optional autoplay, loop, arrow-key nav.

Basic (slide 1 of 4)

Ship faster

<script>
  import { Carousel } from '@spaethtech/svelte-ui';
  const photos = [{ url: '/1.jpg' }, { url: '/2.jpg' }];
  let index = $state(0);
</script>

<Carousel items={photos} bind:index autoplay={4000}>
  {#snippet slide(photo, i)}
    <img src={photo.url} class="w-full h-64 object-cover" />
  {/snippet}
</Carousel>

Autoplay (4s, pauses on hover)

Ship faster