# Carousel A carousel with motion and swipe built using Embla. [Docs](https://www.embla-carousel.com/get-started/svelte) [API Reference](https://www.embla-carousel.com/api) ```svelte {#each Array(5), i}

{i + 1}

{/each} ``` ## About The carousel component is built using the [Embla Carousel](https://www.embla-carousel.com/get-started/svelte/) library. ## Installation ```bash pnpm dlx shadcn-svelte@latest add carousel ``` ```bash npx shadcn-svelte@latest add carousel ``` ```bash bun x shadcn-svelte@latest add carousel ``` ## Usage ```svelte ... ... ... ``` ## Examples ### Sizes To set the size of the items, you can use the `basis` utility class on the ``. ```svelte {#each Array(5) as _, i (i)}

{i + 1}

{/each} ``` Example ```svelte ... ... ... ``` Responsive ```svelte ... ... ... ``` ### Spacing To set the spacing between the items, we use a `ps-[VALUE]` utility on the `` and a negative `-ms-[VALUE]` on the ``. ```svelte {#each Array(5) as _, i (i)}

{i + 1}

{/each} ``` Example ```svelte ... ... ... ``` Responsive ```svelte ... ... ... ``` ### Orientation Use the `orientation` prop to set the orientation of the carousel. ```svelte {#each Array(5) as _, i (i)}

{i + 1}

{/each} ``` ```svelte ... ... ... ``` ## Options You can pass options to the carousel using the `opts` prop. See the [Embla Carousel docs](https://www.embla-carousel.com/api/options/) for more information. ```svelte ... ... ... ``` ## API Use reactive state and the `setApi` callback to get an instance of the carousel API. ```svelte

(api = emblaApi)} class="w-full max-w-xs" > {#each Array(5) as _, i (i)} {i + 1} {/each}

Slide {current} of {count}

``` ```svelte (api = emblaApi)}> ... ... ... ``` ## Events You can listen to events using the api instance from `bind:api`. ```svelte (api = emblaApi)}> ... ... ... ``` ## Plugins You can use the `plugins` prop to add plugins to the carousel. ```svelte ``` ```svelte {#each Array(5) as _, i (i)}

{i + 1}

{/each} ``` See the [Embla Carousel docs](https://www.embla-carousel.com/api/plugins/) for more information on using plugins.