A pilot for your CSS carousels

At my job at Useful Group, a need we often have is building carousels (or sliders, whatever name you prefer). While they are often overused (and badly used) around the web, they still have their very valid use cases. For those, we used to rely on third-party JS-based libraries like Slick, that while did their job well, still had some drawbacks that were annoying us:

• They usually build the carousels for you, which means you don't have absolute control over it, or have to learn some of the inner workings of the library to style them how you want to;
• They are dependent on JavaScript, which means that if for any of a number of reasons JavaScript isn't available (or just the library's file failed to load), your carousel will be broken. It will not only not work but also look very broken, since the JS was responsible for the layout itself;
• Being JS-based, many don't take advantage of the scroll momentum and performance that browsers have provided for free for years.

Around 2 years ago, I tried solving all that and created a library called enhanced-css-slider. It worked and we've used it at Useful Group since then, but it had always been a little bit janky in some situations and it was a nightmare to maintain. So, I threw it out the window and built another solution from scratch that solves all the problems listed above + is smooth as heck! I called it Carousel Pilot.

Carousel Pilot

We've been able to provide a really great horizontal scrolling experience with just HTML and CSS for a while now, especially with scroll snapping. What was left was all that carousels can do aside from scrolling. So, Carousel Pilot was created for just that.

The idea is that you build your own carousel (with HTML/CSS, however you want to build it), and then add Carousel Pilot to it so that it can... pilot it. It's a great way to add progressive enhancement to whatever you're working on: make something that works well enough with just HTML and CSS, and if JavaScript is available, you can add actual functionality to it!

Right now Carousel Pilot provides you with:

• Previous/Next buttons: you provide the buttons, Carousel Pilot controls it;
• Current slide indicators: either a number (slide X of 10) or some other visual indicators, like dots. You also provide those and Carousel Pilot controls them.
• It can hide the scrollbar as well. It's actually a good idea to let Carousel Pilot do that instead of doing it with your own CSS. That way, if JS is not available, the scrollbar will still be there — a perfect tradeoff for the lack of functioning prev/next buttons.
• "Autoplay", so that it cycles between slides automatically given a set interval. It does so sensibly by automatically pausing when the user hovers over the carousel, or stopping altogether if there's any manual action at all. (keeping the typical carousel annoyances to a minimum).
• The big one: Looping! This is by far the hardest thing to implement, especially considering that CSS sliders have real momentum and that any sort of abrupt looping maneuver makes it all feel janky.

The way looping works is that, if enabled, it will immediately clone all your slides a few times, to give looping some buffer to work with. It then keeps track of the real vs fake slides and, as soon as the scrolling motion stops, checks which slide is currently active. If it's a real one, nothing happens. If it's a fake one, it stealthily scrolls to the corresponding real slide — no animation, so to the user it feels like nothing happened at all. You can see this in action by making the scrollbar visible in the demo: notice how it immediately jumps to the right position when scrolling stops?

Of course, if I just clone the slides an X amount of times, it means that there technically is an end to the loop. And if you scroll long enough you see it, just like on the iPhone's alarm settings. But I think that's a fair compromise. I tried other approaches that would try to jump back to the real slides while the scrolling motion was still happening and they all ended up being too janky for my taste.

Wrapping up

Hopefully this tool is useful to you, or at least this post was interesting enough, since you got all the way here ;)

As a reminder, you can find Carousel Pilot, its docs, and an interactive demo at carouselpilot.fantinel.dev.

Thanks for reading!