JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 558
  • Score
    100M100P100Q94042F
  • License MIT

A native-scroll-first carousel component for the web.

Package Exports

  • @blossom-carousel/core
  • @blossom-carousel/core/style.css

Readme

Blossom Core

A native-scroll-first carousel for the web.

Installation

Add the blossom-carousel package to your project.

npm install @blossom-carousel/core

Then, create a Blossom instance and initialize it.

import { Blossom } from "@blossom-carousel/core";
import "@blossom-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("@blossom-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:

Examples