# Blossom Carousel

> The first carousel library that builds on native browser scrolling instead of replacing it

## Documentation Sets

- [Blossom Carousel](https://www.blossom-carousel.com/llms-full.txt): The first carousel library that builds on native browser scrolling instead of replacing it

## Docs

- [Introduction](https://www.blossom-carousel.com/raw/docs/getting-started/introduction.md): Blossom Carousel is draggable and scrollable and maintains all native browser behavior.
- [Installation](https://www.blossom-carousel.com/raw/docs/getting-started/installation.md): Install Blossom Carousel for Vue, React, Svelte, Web Components, or direct Core usage.
- [Vue and Nuxt](https://www.blossom-carousel.com/raw/docs/framework-guides/vue-nuxt.md): Use Blossom Carousel in Vue and Nuxt apps with local imports or global plugin registration.
- [React and Next.js](https://www.blossom-carousel.com/raw/docs/framework-guides/react-nextjs.md): Use Blossom Carousel in React and Next.js apps with tsx, global styles, and semantic root elements.
- [Svelte and SvelteKit](https://www.blossom-carousel.com/raw/docs/framework-guides/svelte-sveltekit.md): Use Blossom Carousel in Svelte and SvelteKit with keyed each blocks and global stylesheet imports.
- [Web Components](https://www.blossom-carousel.com/raw/docs/framework-guides/web-components.md): Use Blossom Carousel as a framework-free custom element with package imports or a CDN build.
- [Core](https://www.blossom-carousel.com/raw/docs/framework-guides/core.md): Use Blossom Carousel Core directly with DOM elements, lazy loading, and lifecycle cleanup.
- [Simple](https://www.blossom-carousel.com/raw/docs/examples/basic/simple.md): Make a scrollable and draggable carousel with Blossom Carousel.
- [Snapping](https://www.blossom-carousel.com/raw/docs/examples/basic/snap.md): Make a snapping carousel with Blossom Carousel.
- [Masonry](https://www.blossom-carousel.com/raw/docs/examples/basic/masonry.md): Create complex layouts and snap to any cell in the grid using CSS grid.
- [Right to Left](https://www.blossom-carousel.com/raw/docs/examples/basic/right-to-left.md): Build a right-to-left carousel with the standard HTML dir attribute.
- [Sticky Slides](https://www.blossom-carousel.com/raw/docs/examples/basic/sticky.md): Use CSS position sticky inside a Blossom Carousel.
- [Buttons](https://www.blossom-carousel.com/raw/docs/examples/basic/buttons.md): Add previous and next controls with navigation components.
- [Dots](https://www.blossom-carousel.com/raw/docs/examples/basic/dots.md): Add interactive dot markers with the BlossomDots component.
- [Thumbnails](https://www.blossom-carousel.com/raw/docs/examples/basic/thumbnails.md): Build thumbnail navigation with BlossomDots and BlossomDot.
- [Cover Flow](https://www.blossom-carousel.com/raw/docs/examples/advanced/cover-flow.md): Create a cover-flow carousel effect with CSS scroll-driven animations.
- [Slideshow](https://www.blossom-carousel.com/raw/docs/examples/advanced/slideshow.md): Create a slideshow with parallax effects.
- [Stories](https://www.blossom-carousel.com/raw/docs/examples/advanced/stories.md): Build an Instagram Stories-inspired 3d effect.
- [Smart Stack](https://www.blossom-carousel.com/raw/docs/examples/advanced/smart-stack.md): Build an iOS-like smart stack.
- [Cards](https://www.blossom-carousel.com/raw/docs/examples/advanced/cards.md): Build an iMessage-style card stack.
- [Flipbook](https://www.blossom-carousel.com/raw/docs/examples/advanced/flipbook.md): Build a 3d flipbook-style carousel with scroll-driven animations.
- [Custom Scrollbar](https://www.blossom-carousel.com/raw/docs/examples/advanced/custom-scrollbar.md): Add a custom scrollbar to Blossom Carousel with svg, offset-path and scroll-timeline.
- [Timeline](https://www.blossom-carousel.com/raw/docs/examples/advanced/timeline.md): Build a video editor timeline with sticky clip labels.
- [CSS Controls](https://www.blossom-carousel.com/raw/docs/examples/experimental/css-controls.md): Use ::scroll-button and ::scroll-marker pseudo-elements to create interactive controls with CSS.
- [Scroll State Query](https://www.blossom-carousel.com/raw/docs/examples/experimental/scroll-state-queries.md): Use CSS scroll-state container queries to style slides based on their snap state.
- [Scroll Snap Events](https://www.blossom-carousel.com/raw/docs/examples/experimental/scroll-snap-changing.md): Trigger actions when a slide snaps using native scroll snap events.
- [Repeat](https://www.blossom-carousel.com/raw/docs/examples/experimental/repeat.md): Use repeat mode for cyclical Blossom Carousel behavior.
- [Scroll Trigger](https://www.blossom-carousel.com/raw/docs/examples/experimental/scroll-trigger.md): Use CSS animation-trigger to animate slides based on their scroll state.
- [Examples](https://www.blossom-carousel.com/raw/docs/examples.md): See examples of what you can build with Blossom Carousel.
- [Accessibility Guide](https://www.blossom-carousel.com/raw/docs/a11y/accessibility-guide.md): Build accessible carousels with semantic structure, clear controls, keyboard support, motion controls, and tested ARIA patterns.
- [Agent Skills](https://www.blossom-carousel.com/raw/docs/ai/agent-skills.md): Use Blossom Carousel Agent Skills to guide AI coding assistants.
- [Embla](https://www.blossom-carousel.com/raw/docs/migration-guides/embla.md): Migrate from Embla Carousel to Blossom Carousel by moving layout and behavior back to native scrolling and CSS.
- [Swiper](https://www.blossom-carousel.com/raw/docs/migration-guides/swiper.md): Migrate from Swiper to Blossom Carousel by replacing Swiper modules, wrappers, and configuration with native scrolling and CSS.
- [Splide](https://www.blossom-carousel.com/raw/docs/migration-guides/splide.md): Migrate from Splide to Blossom Carousel by replacing Splide tracks, lists, options, and events with native scrolling and CSS.
- [Slick](https://www.blossom-carousel.com/raw/docs/migration-guides/slick.md): Migrate from Slick Carousel or React Slick to Blossom Carousel by replacing cloned-track behavior with native scrolling and CSS.
- [Flickity](https://www.blossom-carousel.com/raw/docs/migration-guides/flickity.md): Migrate from Flickity to Blossom Carousel by replacing Flickity cells, options, and events with native scrolling and CSS.

## Blog

- [Navigation controls with the Invoker Commands API](https://www.blossom-carousel.com/raw/blog/navigation-controls-invoker-commands.md): How BlossomPrev, BlossomNext, BlossomDots, and BlossomDot use declarative browser commands to navigate native scroll containers without refs or imperative APIs.
- [How to make a flipbook-style carousel with Blossom](https://www.blossom-carousel.com/raw/blog/flipbook-carousel.md): A step-by-step tutorial for building a 3D flipbook carousel with scroll-driven animations, sticky stacking, and Blossom's overscroll API.
- [Introducing Blossom Carousel](https://www.blossom-carousel.com/raw/blog/introducing-blossom-carousel.md): A native-first carousel library that enhances the browser's own scrolling instead of replacing it—with physics-based drag, CSS-driven configuration and all progressively loaded only when needed.