Carousels have become a powerful and popular choice among the many ways to structure content hierarchy. They are one of the main means to create a spatial form of progressive disclosure by collapsing vertical real estate while inviting horizontal exploration. Their scrolling behavior makes them stand out especially on touch devices where swiping is such a natural gesture.
In essence a carousel is simply a horizontal scroll container with a bunch of slides. Overflow-x makes an element scrollable and already passes as a valid carousel on touch devices through swipe gestures. On non-touch devices horizontal scrolling work, but this lacks another essential component: drag support — a scroll container cannot be dragged with a mouse by default.
Many carousel libraries have solved for this while also adding support for other common carousel features such as snapping and automatically adding arrow buttons and dots navigation. The truth is that the web standards have evolved since the birth of these carousel libraries and it can handle all of these things out of the box these days. Therefore we are currently in a strange hybrid situation where native overflow can create perfect carousels on touch devices and the libraries need to take over on non-touch devices, practically generating 2 completely different components where only 1 should be necessary.
Here is where I saw a potential to create a new kind of carousel solution utilizing native standards and enhancing it with custom code only where necessary.
Blossom Carousel is a lightweight component with a small physics-based engine building on top of native scrolling to enhance carousels with drag support. Blossom's engine only enables itself when an overflow is detected on a non-touch device and seamlessly hands of control between native scrolling and its dragging algorithm.
Because Blossom's core is native scrolling, things like scroll-snapping, position sticky and scroll-driven-animations all work out of the box. Blossom even automatically synchronizes css scroll-snap settings to its javascript engine.
Creating a scrollable and draggable carousel with Blossom is easy as this:
<BlossomCarousel>
<div>1</div>
<div>2</div>
<div>3</div>
</BlossomCarousel>
Whether you want to add snapping, create grid layouts or adjust the gap between slide, any configuration happens through css without any abstraction.
Extending Blossom with custom functionality can also be done without abstraction using all native Javascript scroll events and methods.
Chrome has recently announced a new endeavor for carousels with CSS that will render arrow buttons and dots navigation natively as pseudo elements which will be navitely supported by Blossom and is already available in Chromium browsers.
Work on cyclical scrolling has also been announced by Chrome — "Many carousels wrap around on themselves when they get to the end, like a carousel ride at a fair may have. This is on our radar and we intend to provide a platform solution for it." Before this is implemented in browsers, Blossom will also support this with a custom solution. More on that soon.