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.
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.
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:
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.
Do you retroactively apply web accessibility (WCAG) to your apps, or is it already on your backlog for this sprint? Then you need to read this article. We – all frontend developers – are approaching WCAG completely wrong. It’s part of our job, but we treat it as an afterthought. Stop the bullshit about being EAA-compliant and make accessibility a real part of your work.
Do you ever feel like the frontend of every website and application has become increasingly complex over time? In the past, we built everything using CSS, HTML, and a little bit of JavaScript, but now everything is done with Angular, React, or Vue, with just a bit of CSS and HTML. What has changed, and is this shift actually a positive one?
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,…
