Creating CSS carousels

Carousels are a common feature on the web. They typically take the form of a scrolling content area containing several items, such as presentation slides, ads, headline news stories, or key product features.

Users can move through the items by clicking or activating navigational buttons or by swiping. The navigation usually includes scroll buttons, generally "previous" and "next" buttons or links, and scroll markers, which are a series of button or link icons each representing one or more items depending on how many items are shown at each scroll position within the carousel.

A key feature of carousels is pagination — the items feel like separate pieces of content that are moved between rather than forming one continuous section of content. You might show one item at a time or several items on each carousel "page". When several items are visible, you might show an entirely new group of items each time the "next" or "previous" button is pressed. Alternatively, you could add a single new item to one end of the list and move the item at the other end out of view.

Creating carousels with JavaScript can be quite brittle and challenging to implement. They require scripts to associate scroll markers with the items they represent and continuously update the scroll buttons to keep them operating correctly. When carousels are created using JavaScript, the accessibility of the carousel and the associated controls needs to be added in.

The CSS carousel features enable creating carousels using only CSS and HTML, with the browser handling most of the scrolling and link references in an accessible, flexible, consistent manner. These features are as follows:

::scroll-button()

Generated inside a scroll container, these pseudo-elements represent scroll buttons, which will be wired up to scroll the container in the specified direction.

::scroll-marker-group

Generated inside a scroll container; used to collect together and lay out scroll markers.

::scroll-marker

Generated inside the children of a scroll container ancestor to represent their scroll markers. These can be selected to scroll the container to their associated child elements, and are collected inside the ancestor's ::scroll-marker-group for layout purposes.

:target-current

This pseudo-class can be used to select the currently-active scroll marker. It can be used to provide a highlight style to the currently active marker, which is important for usability and accessibility.

::column

This pseudo-element represents the individual columns generated when a container is set to display its content in multiple columns via CSS multi-column layout. It can be used in conjunction with ::scroll-marker to generate a scroll marker for each column.

In our first demo, we will create a carousel of single pages, with each item taking up the full page. We'll have scroll markers as bottom navigation and scroll buttons on the sides of the page, enabling the user to move to the next and previous pages.

Flexbox is used for the general layout of the carousel, CSS scroll snap is used to enforce clear pagination, and CSS anchor positioning is used to position the scroll markers and scroll buttons relative to the carousel.

The HTML consists of a heading element and an unordered list, with each list item containing some sample content:

<h1>CSS carousel single item per page</h1>
<ul>
  <li>
    <h2>Page 1</h2>
  </li>
  <li>
    <h2>Page 2</h2>
  </li>
  <li>
    <h2>Page 3</h2>
  </li>
  <li>
    <h2>Page 4</h2>
  </li>
</ul>

We use flexbox on the <ul> container and <li> children to create a single row of items, forcing the child list items to display horizontally with each item taking up the full width of the carousel.

The unordered list is made to fill the full width of the viewport with a width width of 100vw; it is also given a height of 300px, and some padding. We then use flexbox to lay out the list — setting a display value of flex to cause the child list items to display in a row (due to the default flex-direction value of row), with a gap of 4vw between each one.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  text-align: center;
  font-size: 1.7rem;
}

ul {
  width: 100vw;
  height: 300px;
  padding: 20px;
  display: flex;
  gap: 4vw;
}

Now its time to style the list items. The first declarations provide rudimentary styling. The important declaration is the flex value of 0 0 100%, which forces each item to be as wide as the container (the <ul>). The viewport content will now scroll horizontally.

li {
  list-style-type: none;
  background-color: #eee;
  border: 1px solid #ddd;
  padding: 20px;

  flex: 0 0 100%;
}

li:nth-child(even) {
  background-color: cyan;
}

In addition, every even-numbered list item is given a different background-color via :nth-child(), so that it is easier to see the scrolling effect.

In this section, we will set an overflow value on the <ul> to turn it into a scroll container, then apply CSS scroll snapping to cause the list to snap to the center of each list item as the content is scrolled.

An overflow-x value of scroll is set on the list so that its content will scroll horizontally, rather than the entire viewport scrolling. CSS scroll snap is then used to snap to each "page" — a scroll-snap-type value of x mandatory is set to make the list into a scroll snap container. The x keyword causes the container's snap targets to be snapped to horizontally, while the mandatory keyword means that the container will always snap to a snap target at the end of a scrolling action.

ul {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

Next, a scroll-snap-align value of center is set on the list items so that, when the list is scrolled, it snaps to the center of each list item.

li {
  scroll-snap-align: center;
}

The code shown so far renders as follows:

Try scrolling the list by swiping or using the scrollbar to see the scroll snapping effect. No matter where you end your scroll motion, an item will always "snap" into place.

In this section we will add "previous" and "next" scroll buttons to the demo to provide a tool to navigate between carousel pages. This can be achieved using the ::scroll-button() pseudo-element.

The ::scroll-button() pseudo-elements generate buttons inside a scroll container only when their content properties are set to a value other than none. Each ::scroll-button() represents a scroll button, the scrolling direction of which is specified by the selector's argument. You can generate up to four scroll buttons per scroll container, which will scroll the container's content towards the start or end of the block or inline axis.

You can also specify a value of * to target all of the ::scroll-button() pseudo-elements with styles.

First, all scroll buttons are targeted with some rudimentary styles, as well as styling based on different states. It is important to set :focus styles for keyboard users. Also, as scroll buttons are automatically set to disabled when no more scrolling can occur in that direction, we use the :disabled pseudo-class to target this state.

ul::scroll-button(*) {
  border: 0;
  font-size: 2rem;
  background: none;
  color: rgb(0 0 0 / 0.7);
  cursor: pointer;
}

ul::scroll-button(*):hover,
ul::scroll-button(*):focus {
  color: rgb(0 0 0 / 1);
}

ul::scroll-button(*):active {
  translate: 1px 1px;
}

ul::scroll-button(*):disabled {
  color: rgb(0 0 0 / 0.2);
}

Next, an appropriate icon is set on the left and right scroll buttons via the content property, which is also what causes the scroll buttons to be generated:

ul::scroll-button(left) {
  content: "◄";
}

ul::scroll-button(right) {
  content: "►";
}

We've created the scroll buttons. Now we will position them relative to the carousel using CSS anchor positioning.

First of all, a reference anchor-name is set on the list. Next, each scroll button has its position set to absolute, and its position-anchor property set to the same reference name defined on the list, to associate the two together.

ul {
  anchor-name: --myCarousel;
}

ul::scroll-button(*) {
  position: absolute;
  position-anchor: --myCarousel;
}

To actually position each scroll button, we set values on their inset properties. We use anchor() functions to position the specified sides of the buttons relative to the sides of the carousel. In each case, the calc() function is used to add some space between the button edge and the carousel edge. For example, the right-hand edge of the left scroll button is positioned 70 pixels to the right of the carousel's left-hand edge.

ul::scroll-button(left) {
  right: calc(anchor(left) - 70px);
  bottom: calc(anchor(top) + 13px);
}

ul::scroll-button(right) {
  left: calc(anchor(right) - 70px);
  bottom: calc(anchor(top) + 13px);
}

Adding in the scroll button code, we get the following result:

Try pressing the "previous" and "next" scroll buttons to see how the pages are scrolled, respecting the scroll-snapping behavior. Also note how the "previous" button is automatically disabled when the list is scrolled to the start of the content, while the "next" button is automatically disabled when the list is scrolled to the end of the content.

Scroll markers are a group of links, each one of which scrolls the carousel to a position related to one of the content pages. They provide an additional navigation tool that also indicates your progress through the carousel pages.

In this section, we will add scroll markers to the carousel, which involves three main features:

• The scroll-marker-group property is set on the scroll container element. It needs to be set to a non-none value for the ::scroll-marker-group pseudo-element to be generated; its value specifies where the scroll marker group appears in the carousel's tab order and layout box order (but not DOM structure) — before puts it at the start, before the scroll buttons, while after puts it at the end.
• The ::scroll-marker-group pseudo-element exists inside a scroll container, and is used to collect together and lay out scroll markers.
• ::scroll-marker pseudo-elements exist inside children of a scroll container ancestor, and represent their scroll markers. These are collected inside the ancestor's ::scroll-marker-group for layout purposes.

To begin with, the list's scroll-marker-group property is set to after, so the ::scroll-marker-group pseudo-element is placed after the list's DOM content in the focus and layout box order:

ul {
  scroll-marker-group: after;
}

Next, the list's ::scroll-marker-group pseudo-element is positioned relative to the carousel using CSS anchor positioning, similar to the scroll buttons except that it is horizontally centered on the carousel using a justify-self value of anchor-center. The group is laid out using flexbox, with a justify-content value of of center and a gap of 20px so that its children (the ::scroll-marker pseudo-elements) are centered inside the ::scroll-marker-group with a gap between each one.

ul::scroll-marker-group {
  position: absolute;
  position-anchor: --myCarousel;
  top: calc(anchor(bottom) - 70px);
  justify-self: anchor-center;
  display: flex;
  justify-content: center;
  gap: 20px;
}

Next, the scroll markers themselves are styled. The look of each one is handled by setting width, height, background-color, border, and border-radius, but we also need to set a non-none value for the content property so they are actually generated.

li::scroll-marker {
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 50%;
  content: "";
}

Finally for this section, the :target-current pseudo-class is used to select whichever scroll marker corresponds to the currently visible "page", highlighting how far the user has scrolled through the content. In this case, we set the background-color to black so it is styled as a filled-in circle.

li::scroll-marker:target-current {
  background-color: black;
}

All of the above code combines together to create the following final result:

Since the previous live example, the scroll markers have been added — try pressing them to jump straight to each page. Note how the current marker is highlighted so you can see where you are in the pagination. Also try tabbing to the scroll marker group, then use the cursor keys to cycle through each page.

You can also navigate between pages by swiping left and right, using the scroll bar, or pressing the scroll buttons.

The second demo creates a carousel with multiple items per page, which again includes scroll buttons and scroll markers for navigating through the pages. The demo is also responsive — different numbers of items appear on each page depending on the viewport width.

This demo is very similar to the Carousel with single pages demo, except that instead of using flexbox for layout, it uses CSS multi-column layout and the ::column pseudo-element to create arbitary columns that span the full width of the carousel and contain multiple items. In this case, the scroll markers are created per-column rather than per-item.

The HTML is very similar to that of the previous demo, except that there are significantly more list items and, as multiple items will be visible at a time, we are labeling them as items rather than pages:

...
  <li>
    <h2>Item 1</h2>
  </li>
...

This demo also has very similar CSS, with the exception of the rules explained in the following sections.

<h1>CSS carousel multiple items per page</h1>
<ul>
  <li>
    <h2>Item 1</h2>
  </li>
  <li>
    <h2>Item 2</h2>
  </li>
  <li>
    <h2>Item 3</h2>
  </li>
  <li>
    <h2>Item 4</h2>
  </li>
  <li>
    <h2>Item 5</h2>
  </li>
  <li>
    <h2>Item 6</h2>
  </li>
  <li>
    <h2>Item 7</h2>
  </li>
  <li>
    <h2>Item 8</h2>
  </li>
  <li>
    <h2>Item 9</h2>
  </li>
  <li>
    <h2>Item 10</h2>
  </li>
  <li>
    <h2>Item 11</h2>
  </li>
  <li>
    <h2>Item 12</h2>
  </li>
  <li>
    <h2>Item 13</h2>
  </li>
  <li>
    <h2>Item 14</h2>
  </li>
  <li>
    <h2>Item 15</h2>
  </li>
</ul>

This example uses CSS multi-column layout, rather than flexbox, to layout the carousel items. The columns value of 1 forces its contents to display as a single column. A text-align value of center is also applied, forcing the contents to align with the center of the list.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  text-align: center;
  font-size: 1.7rem;
}

ul {
  width: 100vw;
  height: 300px;
  padding: 10px;

  overflow-x: scroll;
  scroll-snap-type: x mandatory;

  columns: 1;
  text-align: center;
}

We provide rudimentary box styling for the list items, with multiple items fitting into the single content column (as previously defined using the columns property); the number dynamically changes as the list gets wider or narrower.

li {
  list-style-type: none;

  display: inline-block;
  height: 100%;
  aspect-ratio: 3/4;

  background-color: #eee;
  border: 1px solid #ddd;
  padding: 20px;
  margin: 0 10px;

  text-align: left;
}

li:nth-child(even) {
  background-color: cyan;
}

The key properties are as follows:

• A display value of inline-block has been set to force the list items to sit alongside one another and make the list scroll horizontally.
• A fixed aspect-ratio of 3/4 has been set on them, to control their sizing as the list size changes, but keep their width constant while the height of the list stays constant.
• A text-align value of left is set on them to override the text-align: center set on the parent container, so the item content will be left-aligned.

The scroll-snap-align property is now set on the ::column pseudo-elements — which represent the content columns generated by the columns property — rather than the list items. We want to snap to each complete column rather than every individual list item, showing all new items with each scroll action.

ul::column {
  scroll-snap-align: center;
}

ul::scroll-button(*) {
  border: 0;
  font-size: 2rem;
  background: none;
  color: rgb(0 0 0 / 0.7);
  cursor: pointer;
}

ul::scroll-button(*):hover,
ul::scroll-button(*):focus {
  color: rgb(0 0 0 / 1);
}

ul::scroll-button(*):active {
  translate: 1px 1px;
}

ul::scroll-button(*):disabled {
  color: rgb(0 0 0 / 0.2);
}

ul::scroll-button(left) {
  content: "◄";
}

ul::scroll-button(right) {
  content: "►";
}

ul {
  anchor-name: --myCarousel;
}

ul::scroll-button(*) {
  position: absolute;
  position-anchor: --myCarousel;
}

ul::scroll-button(left) {
  right: calc(anchor(left) - 70px);
  bottom: calc(anchor(top) + 13px);
}

ul::scroll-button(right) {
  left: calc(anchor(right) - 70px);
  bottom: calc(anchor(top) + 13px);
}

ul {
  scroll-marker-group: after;
}

ul::scroll-marker-group {
  position: absolute;
  position-anchor: --myCarousel;
  top: calc(anchor(bottom) - 70px);
  justify-self: anchor-center;
  display: flex;
  justify-content: center;
  gap: 20px;
}

The CSS for creating the scroll markers in this demo is nearly identical to the previous demo, except that the selectors are different — the scroll markers are created on the generated ::column scroll markers rather than the list items.

ul::column::scroll-marker {
  content: "";
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 10px;
}

ul::column::scroll-marker:target-current {
  background-color: black;
}

The Responsive carousel is rendered as follows:

Try navigating between the different pages by swiping left and right, using the scroll bar, pressing the scroll buttons, and pressing the scroll markers. The functionality is similar to the single page flexbox example, except that now there are multiple list items in each navigated position; the scroll markers are on columns potentially containing multiple items, instead of on each item.

Also, try resizing the screen width and you'll see that the number of list items that can fit inside the list changes — and therefore the number of generated columns changes too. As the number of columns changes, the number of scroll markers dynamically updates so that each column is represented in the scroll marker group.

• CSS overflow module
• CSS anchor positioning module
• CSS scroll snap module
• CSS Carousel Gallery via chrome.dev (2025)