Getting Started with Svelte

Scrollable and draggable carousels in your Svelte app in seconds.

Installation

Add the blossom-carousel package to your project.

npm install @blossom-carousel/svelte

Then, add the component to your Svelte app

import BlossomCarousel from '@blossom-carousel/svelte';
import '@blossom-carousel/svelte/style.css';

Usage

<BlossomCarousel>
  {#each Array(12).fill(0).map((_, i) => i + 1) as num}
  <div key="{num}">{num}</div>
  {/each}
</BlossomCarousel>

as

Define the HTMLElement of the carousel root.

<BlossomCarousel as="ul">
  {#each Array(12).fill(0).map((_, i) => i + 1) as num}
  <li key="{num}">{num}</li>
  {/each}
</BlossomCarousel>

Renders as

<ul>
  <li>Slide 1</li>
  <li>Slide 2</li>
  <li>Slide 3</li>
  ...
</ul>