Blossom Carousel

Blossom Carousel is the first carousel library that builds on native browser scrolling instead of replacing it. It provides a small drag enhancement for pointer devices while maintaining the core interaction model, performance, and accessibility of a real scroll container.

• 🥇 Native scrolling: Full performance and accessibility.
• 🚀 Dragging: Custom physics-based dragging for all pointer types.
• ➡️ Navigation controls: First-class Previous, Next and Dots navigation controls with customizable dot rendering.
• ✨ No abstraction: Works with all native web API's.
• 💡 Configure with CSS: Works with CSS scroll-snap, position sticky and scroll-driven animations and more.
• 🪶 0kb on touch devices: Blossom only loads when a fine pointer device is detected.
• 🧱 Framework ready: Components for React, Vue, Svelte and Web Components.
• 🚧 Experimental cyclical scrolling: Allows the carousel to infinitely loop.

Installation

Framework	Installation Command	Docs
Vue	npm install @blossom-carousel/vue	Vue Docs
React	npm install @blossom-carousel/react	React Docs
Svelte	npm install @blossom-carousel/svelte	Svelte Docs
Web Component	npm install @blossom-carousel/web	Web Component Docs
Core	npm install @blossom-carousel/core	Core Docs

Agent Skills

Blossom Carousel's Agent Skills help AI coding assistants give package-specific guidance.

Install the skills Compatible agents (Cursor, Claude Code, etc.) can discover and use skills automatically.

npx skills add https://www.blossom-carousel.com

Examples

Explore ready-to-copy carousel patterns grouped by complexity.

See all examples

Migration Guides

From	Migration Guide
Embla	Migration from Embla
Swiper	Migration from Swiper
Splide	Migration from Splide
Slick	Migration from Slick
Flickity	Migration from Flickity