1<script lang="ts"> 2 import * as Card from '../card/index.js'; 3 import * as Carousel from './index.js'; 4</script> 5 6<Carousel.Root class="w-full max-w-xs"> 7 <Carousel.Content> 8 {#each Array(5) as _, i (i)} 9 <Carousel.Item> 10 <div class="p-1"> 11 <Card.Root> 12 <Card.Content class="flex aspect-square items-center justify-center p-6"> 13 <span class="text-4xl font-semibold">{i + 1}</span> 14 </Card.Content> 15 </Card.Root> 16 </div> 17 </Carousel.Item> 18 {/each} 19 </Carousel.Content> 20 <Carousel.Previous /> 21 <Carousel.Next /> 22</Carousel.Root> 23

Installation

Usage

Use carousel for swipeable slides. Compose with Carousel.Content, Carousel.Item, and optional Carousel.Previous / Carousel.Next controls. Pass Embla options through opts.

1<script lang="ts">
2	import * as Carousel from '~/components/carousel';
3</script>
4
5<Carousel.Root class="w-full max-w-xs">
6	<Carousel.Content>
7		{#each Array(5) as _, i (i)}
8			<Carousel.Item>
9				<div class="p-1">Slide {i + 1}</div>
10			</Carousel.Item>
11		{/each}
12	</Carousel.Content>
13	<Carousel.Previous />
14	<Carousel.Next />
15</Carousel.Root>