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.
Button controls
Navigate the carousel programmatically with prev() and next().
const blossomCarousel = document.querySelector("#blossom-carousel");
<button onclick="blossomCarousel.prev()">Previous</button>
<button onclick="blossomCarousel.next()">Next</button>
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})`;
});
});