Framework Guides
Web Components
Use Blossom Carousel as a framework-free custom element with package imports or a CDN build.
Install
pnpm add @blossom-carousel/web
bun add @blossom-carousel/web
yarn add @blossom-carousel/web
npm install @blossom-carousel/web
Module setup
import "@blossom-carousel/web";
import "@blossom-carousel/core/style.css";
After the module is imported, the <blossom-carousel> element is registered.
<blossom-carousel class="carousel">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide 3</div>
</blossom-carousel>
CDN setup
<script
defer
src="https://unpkg.com/@blossom-carousel/web/dist/blossom-carousel-web.umd.js"
></script>
<link
rel="stylesheet"
href="https://unpkg.com/@blossom-carousel/core/dist/blossom-carousel-core.css"
/>
Use the CDN build for static pages without a build step.
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})`;
});
});