Carousel

A draggable, swipeable carousel built on Embla.

1

2

3

4

5

Installation

npx lily-svelte@latest add carousel

Installs the style saved in lily.json. For a new Diamond project, run lily-svelte init --style diamond first.

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Add the Embla dependency, then copy the source into `$lib/components/ui/carousel`.

npm install embla-carousel-svelte

Usage

<script lang="ts">
	import * as Carousel from '$lib/components/ui/carousel';
</script>
 
<Carousel.Root class="w-full max-w-xs">
	<Carousel.Content>
		{#each items as item (item)}
			<Carousel.Item>{item}</Carousel.Item>
		{/each}
	</Carousel.Content>
	<Carousel.Previous />
	<Carousel.Next />
</Carousel.Root>

← Card Chart →