Skip to Content
The Public InterfaceSeptember 12, 2026

The Public Interface

June 25, 2024

How to Create a Carousel using Modern Web Standards

Learn to build an interactive carousel using CSS scroll-snap and progressively enhance it with JavaScript.

By Ross Robinocss / carousel / javascript

A carousel is a common UI element many applications have in place. It can be nice to display images or cards of information. Here’s how to create a carousel with CSS scroll-snap and progressively enhance the carousel with buttons on either side.

First we’ll set up the carousel with just HTML and CSS. Here we can use custom elements without JavaScript to avoid having to use class names for our CSS. Custom elements do not require JS!

I’m setting some placeholder images with Lorem Picsum.

Next, we can use scroll-snap CSS properties to make sure that when the user scrolls, the item they scroll to is automatically centered.

Many design systems include buttons with a carousel for the user to click to scroll instead of having to use the scrollbar. We can provide this progressive enhancement with web components that use JavaScript. We can create a carousel-trigger element that uses a direction attribute that specifies which direction the content should scroll.

To create the trigger, we’ll create CarouselContent and CarouselTrigger classes and define them in the custom elements registry.

First the CarouselContent class will provide a method to shift the carousel forward or backward.

Next we’ll create the CarouselTrigger class to create the buttons and call the shift function when they are clicked.

Finally, if JavaScript hasn’t loaded, we do not want to show these buttons since they will not work. We can use CSS to hide the triggers if they are not defined in the custom elements registry.

We’ll also add scroll-behavior: smooth to ensure our carousel smoothly scrolls to the next image when the trigger is activated.

Altogether the code looks like this:

Starting with a basic structure, we utilized CSS scroll-snap properties for smooth scrolling, and progressively enhanced the carousel with navigation buttons using custom web components. This approach not only ensures a more modular and maintainable codebase but also enhances user experience across different platforms and devices. Keep experimenting and customizing to fit your specific needs, and enjoy the flexibility that comes with combining modern web standards and progressive enhancement techniques.…

Continue reading

In brief

A Case for CSS Components

Reasons to use CSS stylesheets instead of JavaScript UI frameworks to author primitive components.

JavaScript UI frameworks offer invaluable solutions for front-end developers, with one of their most significant advantages being the streamlined approach to component-based development. By leveraging components, developers are empowered to write less code while ensuring consistent reusability across their entire application. While UI frameworks greatly enhance the process of authoring JavaScript components, it’s important to resist the temptation to rely on them as a universal problem-solving tool. Not all components require JavaScript, such as a generic button, label, or card. In this article, I’ll outline the case to author these components in a CSS stylesheet instead of creating a new framework component containing just styles and an HTML element.

August 21, 2023

Create a Svelte Component Library

How to create a npm package with SvelteKit to share your components between projects.

This post was updated on Mar 22, 2023 to account for the changes in svelte-package 2.0. This update simplified the process for setting up a component library. See instructions on migrating an existing project here. You can also now find more information on svelte-package in the documentation. If you frequently have components that you share between projects and want to keep a single repository of them, you can create a package on npm. Here’s how to create a Svelte component library with SvelteKit.

January 12, 2023

Use the Navigator API to Create a Share/Copy Component with Svelte

Easily create a share/copy component with no added dependencies.

The navigator API provides two methods to make it easier to share a website depending on the user’s browser/OS. The API allows enables you to quickly identify the support and utilize the best method for the user’s system. To set up the share button, the .share method takes an object as an argument where we can specify the url and title of the ShareData. We can set these up as props to be able to assign them when we create the component.

October 15, 2022