Blossom Svelte

A native-scroll-first carousel for Svelte.

Installation

npm install @blossom-carousel/svelte

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

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

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>