CSS-only Carousel Slider

CSS-only Carousel Slider

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.


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.

Read more about:

How I added my Porsche EV to Homekit

Since my childhood, I have been passionate about cars and everything related to them. Even at a young age, I knew every model. I spent hours flipping through car magazines searching for new facts and always dreamed of owning an exotic car. Initially, I used to dream of owning a Ferrari, but as I grew older and wiser,…

Continue reading

Homekit `Power consumption` sensor

Recently, I purchased a HomeWizard Wi-Fi P1 Meter. This device provides me with insights into the electricity and gas usage in my home. With 4 solar panels installed, I anticipate generating excess electricity during the spring and summer months. Despite knowing the capacity of the panels, I am unsure of the exact…

Continue reading

How to test Nuxt.js asyncData and fetch hooks

When you setup a new project with the official create-nuxt-app or when you do it manually you probably setup a testing framework to write unit tests. Most Nuxt.js and Vue applications use the official @vue/test-utils which includes clever methods and options to help you write the best unit tests for your application. You probably tried to test your asyncData or fetch hook but couldn't succeed. This article explains why this is, but also…

Continue reading