Examples
See examples of what you can build with Blossom Carousel.
| Category | Example | Description |
|---|---|---|
| Basic | Basic | |
| Basic | Simple | Make a scrollable and draggable carousel with Blossom Carousel. |
| Basic | Snapping | Make a snapping carousel with Blossom Carousel. |
| Basic | Masonry | Create complex layouts and snap to any cell in the grid using CSS grid. |
| Basic | Right to Left | Build a right-to-left carousel with the standard HTML dir attribute. |
| Basic | Sticky Slides | Use CSS position sticky inside a Blossom Carousel. |
| Basic | Buttons | Add previous and next controls with navigation components. |
| Basic | Dots | Add interactive dot markers with the BlossomDots component. |
| Basic | Thumbnails | Build thumbnail navigation with BlossomDots and BlossomDot. |
| Advanced | Advanced | |
| Advanced | Cover Flow | Create a cover-flow carousel effect with CSS scroll-driven animations. |
| Advanced | Slideshow | Create a slideshow with parallax effects. |
| Advanced | Stories | Build an Instagram Stories-inspired 3d effect. |
| Advanced | Smart Stack | Build an iOS-like smart stack. |
| Advanced | Cards | Build an iMessage-style card stack. |
| Advanced | Flipbook | Build a 3d flipbook-style carousel with scroll-driven animations. |
| Advanced | Custom Scrollbar | Add a custom scrollbar to Blossom Carousel with svg, offset-path and scroll-timeline. |
| Advanced | Timeline | Build a video editor timeline with sticky clip labels. |
| Experimental | Experimental | |
| Experimental | CSS Controls | Use ::scroll-button and ::scroll-marker pseudo-elements to create interactive controls with CSS. |
| Experimental | Scroll State Query | Use CSS scroll-state container queries to style slides based on their snap state. |
| Experimental | Scroll Snap Events | Trigger actions when a slide snaps using native scroll snap events. |
| Experimental | Repeat | Use repeat mode for cyclical Blossom Carousel behavior. |
| Experimental | Scroll Trigger | Use CSS animation-trigger to animate slides based on their scroll state. |