Create a carousel out of nothing but CSS

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!

Words: Ben Schwarz (opens in new tab)

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.

Liked this? Read these!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.