Blossom Svelte

A native-scroll-first carousel for Svelte.

Installation

npm install @blossom-carousel/svelte

Svelte

import BlossomCarousel from "@blossom-carousel/svelte";
import "@blossom-carousel/core/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>

Methods

Slide to the previous or next element. use the align option to control the alignment of the target element. allowed values are "start" | "center" | "end"

⚠ when scroll-snap is active, the css scroll-snap-align value will be used and the align option will be ignored.

blossomRef.prev({ align: "center" });
blossomRef.next({ align: "center" });

Examples

• Simple
• Variable widths
• CSS Grid
• Multiple rows
• Snapping
• Grouping
• Sticky
• Coverflow