Framework Guides
Core
Use Blossom Carousel Core directly with DOM elements, lazy loading, and lifecycle cleanup.
Install
pnpm add @blossom-carousel/core
bun add @blossom-carousel/core
yarn add @blossom-carousel/core
npm install @blossom-carousel/core
Basic setup
import { Blossom } from "@blossom-carousel/core";
import "@blossom-carousel/core/style.css";
const element = document.querySelector("#my-carousel-element");
if (element) {
const blossom = Blossom(element);
blossom.init();
}
Lazy loading
Lazy load Blossom Carousel only on non-touch devices.
const hasMouse = window.matchMedia(
"(hover: hover) and (pointer: fine)",
).matches;
if (hasMouse) {
const { Blossom } = await import("@blossom-carousel/core");
const element = document.querySelector("#my-carousel-element");
const blossom = Blossom(element);
blossom.init();
}
Destroy
blossom.destroy();
Call destroy() during route changes, component unmounting, or whenever the carousel root will be removed from the DOM.
Overscroll API
Tap into Blossom's drag engine's overscroll behavior to create your own style.
blossomCarousel.addEventListener("overscroll", (event) => {
// prevent Blossom's default rubberbanding effect
event.preventDefault();
const overScroll = event.detail.left;
Array.from(blossomCarousel.children).forEach((slide) => {
slide.style.transform = `scale(${1 - overScroll * 0.1})`;
});
});