Skip to content Skip to footer

Responsive Photogallery and Carousel in HTML and CSS

I built a photogallery carousel in pure HTML and CSS, featuring responsive images and touch controls for mobile devices.

Simone Silvestroni's avatar ·

Screenshot of the photogallery in action, showing a large image and three thumbnails underneath

Objectives

While working on Silvia Maggi’s new website, we realised that her photo galleries, relying on two Javascript-based components from Bootstrap 5, were slowing down the loading time and affecting the benchmarks. Since we shared a principle of considering web performance as a design feature instead of an afterthought, she asked me to create an image gallery carousel in HTML and CSS instead. It had to be integrated in Jekyll, adopt responsive images and a few intuitive touch controls for mobile devices.

Approach

Over the years, in a quest to continuous performance optimisation, I have been writing HTML and CSS alternatives to complex accordions, interactive overlays, image galleries and more. As I once again deemed the use of Javascript for such a case a waste of resources, I resorted to a similar technique.

The photogallery in action

On Silvia’s website a few splendid photogalleries can be seen in their carousels. A technical description, with public gists for the source code can be found on GitHub.

Improvements

I’m considering two future improvements: in case a CMS admin dashboard had been integrated with Jekyll, I could wrap the module into a full-fledged Jekyll plugin, as a drag-and-drop object in the CMS. Also, from an accessibility standpoint, the CSS hack used to launch the modal window isn’t satisfactory.

Results

Tests were successful on all devices, desktop, tablets and smartphones with modern browsers. Swiping on touch devices worked as expected while most browsers on desktop gracefully accepted the scroll snapping. Performance checks returned stunning results: thanks to the efficient code, and the implementation of responsive images, Pagespeed on mobile went from 27 to 100.

Skills

  • Jekyll
  • Liquid
  • Responsive images
  • HTML
  • CSS
  • SASS
  • Bootstrap 5