CSS-only Carousel Slider

Posted on 22nd of March 2024 | Reading time: 5 minutes

As a frontend developer, my days are primarily filled with crafting JavaScript-based components using frameworks like Vue, React, or Angular. These frameworks excel at empowering me to create reusable frontend elements, whether it's buttons, modals, links, or accordions. However, as I reflect on my reliance on these frameworks, I'm prompted to question their necessity for components that may not require JavaScript at all.

Consider a button, for instance – at its core, it's merely a styled clickable area. So, why do I default to creating JavaScript-based components for such fundamental elements?

In this article, I aim to showcase the capabilities of modern browsers and demonstrate how we can build a fully functional carousel slider without relying on JavaScript. By doing so, I hope to encourage you to reconsider the need for JavaScript when developing frontend components. Let's explore the possibilities and challenge the status quo together.

A Basic Carousel Slider

In my opinion, a carousel slider should be simple. It's just a list with items representing each slide.

The container for the carousel (the UL element) takes up the whole width, set at 100%. Each slide item (let's say 3 items) also fills the width completely. When put together, they make a list with a horizontal scrollbar. The total width of the list is 300%, but the container remains at 100%, so we get a scrollbar.

This arrangement turns the list into a carousel. You can scroll sideways to see new slides, like swiping on a phone. We use CSS properties like "scroll-snap-type" and "scroll-behavior" to mimic this swipe effect. When you scroll or drag to see the next slide, the browser automatically moves to the start of each slide. For example, if you scroll 70%, you'll see part of the first slide and most of the second. After you stop, the browser smoothly transitions to the second slide, since it's the most visible.

Knowing this, we're already on our way to creating a nearly perfect carousel slider:

See the Pen  CSS-only Carousel Slider | Basic Slider by Jasper Seinhorst (@jasper-seinhorst) on CodePen.

Adding navigation to see `next` and `previous` slide

An ideal carousel should be easy for everyone to use. While our Basic Carousel Slider works well on mobile devices with touchscreens, it's not as friendly for people using desktops with a mouse. To fix this, let's upgrade our slider by adding navigation buttons. You might think we need JavaScript for this, but I'll show you how to do it with CSS tricks.

Our carousel is basically a list with a scrollbar. We can use the browser's default scroll behavior, called anchor scrolling. When you click on a link, the browser smoothly scrolls to the right spot. Here's how to do it:

1. Give each slide a unique name.
2. Add links within each slide to move to the next or previous one.
3. When you click a link, the browser will smoothly scroll to that slide.
4. And with 'scroll-behavior: smooth' in CSS, the transition looks nice.

Let's give it a try!

See the Pen CSS-only Carousel Slider | Navigation by Jasper Seinhorst (@jasper-seinhorst) on CodePen.

Summary

In wrapping up, we've seen how HTML and CSS alone can create impressive components like the carousel slider. While JavaScript usually steals the show, we've proven that advanced features are achievable without it. By sticking to CSS-only solutions, we simplify our code and boost accessibility and performance. While there might be limits to how far we can push component behavior, HTML and CSS cover most frontend needs well. So, next time you're starting a project, remember the power of CSS-only components. Keep it simple, challenge the norm, and open up a world of frontend possibilities.