CSS Carousels | CSS-Tricks

First, let’s set these up in a CSS auto grid that displays the list items in a single line:

.carousel {
  display: grid;
  grid-auto-flow: column;
}

We can tailor this so that each list item takes up a specific amount of space, say 40%, and insert a gap between them:

.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 40%;
  gap: 2rem;
}

This gives us a nice scrolling area to advance through the list items by moving left and right. We can use CSS Scroll Snapping to ensure that scrolling stops on each item in the center rather than scrolling right past them.

.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 40%;
  gap: 2rem;

  scroll-snap-type: x mandatory;

  > li {
    scroll-snap-align: center;
  }
}

Kevin adds a little more flourish to the .carousel so that it is easier to see what’s going on. Specifically, he adds a border to the entire thing as well as padding for internal spacing.

So far, what we have is a super simple slider of sorts where we can either scroll through items horizontally or click the left and right arrows in the scroller.

We can add scroll buttons to the mix. We get two buttons, one to navigate one direction and one to navigate the other direction, which in this case is left and right, respectively. As you might expect, we get two new pseudo-elements for enabling and styling those buttons:

• ::scroll-button(left)
• ::scroll-button(right)

Interestingly enough, if you crack open DevTools and inspect the scroll buttons, they are actually exposed with logical terms instead, ::scroll-button(inline-start) and ::scroll-button(inline-end).

And both of those support the CSS content property, which we use to insert a label into the buttons. Let’s keep things simple and stick with “Left” and “Right” as our labels for now:

.carousel::scroll-button(left) {
  content: "Left";
}
.carousel::scroll-button(right) {
  content: "Right";
}

Now we have two buttons above the carousel. Clicking them either advances the carousel left or right by 85%. Why 85%? I don’t know. And neither does Kevin. That’s just what it says in the specification. I’m sure there’s a good reason for it and we’ll get more light shed on it at some point.

But clicking the buttons in this specific example will advance the scroll only one list item at a time because we’ve set scroll snapping on it to stop at each item. So, even though the buttons want to advance by 85% of the scrolling area, we’re telling it to stop at each item.

Remember, this is only supported in Chrome at the time of writing:

We can select both buttons together in CSS, like this:

.carousel::scroll-button(left),
.carousel::scroll-button(right) {
  /* Styles */
}

Or we can use the Universal Selector:

.carousel::scroll-button(*) {
  /* Styles */
}

And we can even use newer CSS Anchor Positioning to set the left button on the carousel’s left side and the right button on the carousel’s right side:

.carousel {
  /* ... */
  anchor-name: --carousel; /* define the anchor */
}

.carousel::scroll-button(*) {
  position: fixed; /* set containment on the target */
  position-anchor: --carousel; /* set the anchor */
}

.carousel::scroll-button(left) {
  content: "Left";
  position-area: center left;
}
.carousel::scroll-button(right) {
  content: "Right";
  position-area: center right;
}

Notice what happens when navigating all the way to the left or right of the carousel. The buttons are disabled, indicating that you have reached the end of the scrolling area. Super neat! That’s something that is normally in JavaScript territory, but we’re getting it for free.

Let’s work on the scroll markers, or those little dots that sit below the carousel’s content. Each one is an element anchored to a specific list item in the carousel so that, when clicked, you get scrolled directly to that item.

.carousel::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.carousel {
  /* ... */
  scroll-marker-group: after; /* displayed below the content */
}

.carousel {
  /* ... */

  > li::scroll-marker {
    content: "";
    aspect-ratio: 1;
    border: 2px solid CanvasText;
    border-radius: 100%;
    width: 20px;
  }
}

li::scroll-marker:target-current {
  background: CanvasText;
}

li::scroll-marker:hover,
li::scroll-marker:focus-visible {
  background: LinkText;
}

.carousel {
  /* ... */

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}