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.
| 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 |
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.comExplore ready-to-copy carousel patterns grouped by complexity.
| From | Migration Guide |
|---|---|
| Embla | Migration from Embla |
| Swiper | Migration from Swiper |
| Splide | Migration from Splide |
| Slick | Migration from Slick |
| Flickity | Migration from Flickity |