Examples
See examples of what you can build with Blossom Carousel.
| Category | Example | Description |
|---|---|---|
| Basic | Simple | Basic scrollable and draggable carousel layout. |
| Basic | Snapping | CSS scroll-snap carousel with centered snapping slides. |
| Basic | Masonry | Grid-based masonry carousel with complex snapping cells. |
| Basic | Right to Left | Right-to-left carousel behavior using the dir attribute. |
| Basic | Sticky Slides | Sticky labels and content inside horizontal slides. |
| Basic | Buttons | Programmatic previous and next button controls. |
| Basic | Dots | Interactive dot navigation synced with active slide. |
| Basic | Thumbnails | Thumbnail navigation linked to the main carousel. |
| Advanced | Cover Flow | 3D cover flow effect using scroll-driven animations. |
| Advanced | Slideshow | Slideshow layout with parallax slide movement. |
| Advanced | Stories | Stories-style 3D transitions with overscroll behavior. |
| Advanced | Smart Stack | iOS-like stacked cards animated on scroll. |
| Advanced | Cards | Sticky card stack inspired by chat app interactions. |
| Advanced | Flipbook | 3D flipbook page-turning carousel effect. |
| Advanced | Timeline | Video-editor style timeline with sticky clip labels. |
| Experimental | CSS Controls | Native CSS scroll buttons and marker controls. |
| Experimental | Scroll State Query | Style slides using CSS scroll-state container queries. |
| Experimental | Scroll Snap Events | React to native scroll snap change events. |
| Experimental | Repeat | Cyclical repeat mode for infinite-feeling loops. |
| Experimental | Scroll Trigger | Animate with CSS animation-trigger on scroll state. |