Blossom Core

A native-scroll-first carousel for the web.

Installation

Add the blossom-carousel package to your project.

npm install @numbered/carousel/core

Then, create a Blossom instance and initialize it.

import { Blossom } from "@numbered/carousel/core";
import "@numbered/carousel/core/style.css";

const element = document.querySelector("#my-carousel-element");
// prepare the Blossom carousel
const blossom = Blossom(element);
// initialize whenever you want
blossom.init();

Lazy loading

Load Blossom only when needed.

const hasMouse = window.matchMedia(
  "(hover: hover) and (pointer: fine)"
).matches;

// We don't need Blossom's engine on touch devices
if (!hasMouse) return;

const { Blossom } = await import("@numbered/carousel/core");

const element = document.querySelector("#my-carousel-element");
const blossom = Blossom(element);
blossom.init();

Destroy

Destroy the Blossom instance when you no longer need it to free up resources.

blossom.destroy();

Get started in your favorite framework:

• React
• Vue
• Svelte
• Web Component

Examples

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