You don't need JavaScript to build a carousel any more, Ben Schwarz introduces a CSS library that does the job.
Carousel scripts are used on so many websites around the Web - the pattern has been implemented all over the place. They generally depend on a library such as jQuery and are loaded with a lot of animations and features. Modern browsers are super-powerful. Can't we ditch the scripts and use CSS instead? Hell yeah, we can!
Gallery CSS is an all-CSS carousel that doesn't require any JavaScript whatsoever. It uses well-deployed CSS features and relies on simple markup (and class) conventions to work. Quite simply, we could have been building libraries like Gallery CSS for years now!
Features
Gallery CSS has zero dependencies (not even one line of script). Simply drop in gallery.css with gallery.theme.css, make any customisations you'd like, and you're off! If you want the carousel to automatically cycle through its items, you can just add the autoplay class. Got more than three items? Change the class from items-3 to items-4.
Following simple markup conventions gives you a tremendous amount of flexibility - you can have more than one gallery on screen, inject it with AJAX, whatever. Try doing that with JavaScript! And because Gallery CSS carries the MIT licence, you can use it uninhibited in your projects.
Because Gallery CSS is written using CSS transitions and animations, all animation is handled by the GPU, which means that it performs far better than a standard jQuery library using animate().
How it works
All animations are done using CSS transitions and animation, which means that they're hardware-accelerated where supported.
User interactivity is handled via the seldom-used :target selector. There are tons of tiny details that make Gallery CSS tick, so it's worth digging around the source code.
Can I use it all the time?
As you may be aware, IE 8 supports neither :target nor CSS transitions or animations. While getting Gallery CSS to work in old browsers by adding a script to support these CSS features is entirely possible, it might not be worth it (depending on your project).
By adding jQuery, jQuery-extended selectors and/or Selectivizr, you'll get Gallery CSS to work just fine in old versions of IE. But ask yourself, is it worth the extra weight? I'd argue that it's not. And if you must support legacy browsers, then maybe you should be using a jQuery plugin in the first place. That's exactly what jQuery (version 1.9 at least) is designed to do.
Otherwise, I believe we should be looking towards the future, using solutions like Gallery CSS where possible, and building a strong understanding of what can be done without scripts!
Ben Schwarz is a web developer from Melbourne, Australia. He is interested in community (as creatives and builders), building tools and the future of the web. He writes articles about building for the web.
Get top Black Friday deals sent straight to your inbox: Sign up now!
We curate the best offers on creative kit and give our expert recommendations to save you time this Black Friday. Upgrade your setup for less with Creative Bloq.
