Blossom Carousel Web Components

<blossom-carousel> is a custom element that wraps a native horizontal scroll container. Layout, slide sizes, gaps, and snapping are plain CSS. Blossom adds mouse dragging with momentum and rubber-banding, while touch devices keep native scrolling.

If the project uses React, Vue, or Svelte, use the matching blossom-carousel-react, blossom-carousel-vue, or blossom-carousel-svelte skill instead. For migrations from Embla, Swiper, Splide, Slick, or Flickity, use the blossom-carousel-migration skill first.

Setup

With a bundler:

npm install @blossom-carousel/web

import "@blossom-carousel/web"; // registers all custom elements
import "@blossom-carousel/web/style.css";