Skip to content

Add CSS carousel examples #302

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 7, 2025
Merged

Add CSS carousel examples #302

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dfb845e
Add CSS carousel examples
chrisdavidmills Mar 21, 2025
aedab9c
Merge branch 'main' into css-carousel-examples
pepelsbey Aug 5, 2025
682b18e
Update css-carousels/scroll-button-scroll-marker-with-columns/styles.css
chrisdavidmills Aug 7, 2025
5bf4bc2
Update css-carousels/scroll-button-scroll-marker/styles.css
chrisdavidmills Aug 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ Code examples that accompany various MDN DOM and Web API documentation pages.

- The "contact-picker" directory contains an example showing usage of the [Contact Picker API](https://developer.mozilla.org/en-US/docs/Web/API/Contact_Picker_API). [See the example live](https://mdn.github.io/dom-examples/contact-picker/).

- The "css-carousels" directory contains two examples showing how to use the CSS Carousel features — [a basic example featuring scroll buttons and scroll markers](https://mdn.github.io/dom-examples/css-carousels/scroll-button-scroll-marker/), and an [example that also uses the `::columns` pseudo-class to paginate the content](https://mdn.github.io/dom-examples/css-carousels/scroll-button-scroll-marker-with-columns/).

- The "css-painting" directory contains examples demonstrating the [CSS Painting API](https://developer.mozilla.org/docs/Web/API/CSS_Painting_API). See the [examples live](https://mdn.github.io/dom-examples/css-painting).

- The "css-progress" directory contains an example demonstrating the [CSS `progress()` function](https://developer.mozilla.org/en-US/docs/Web/CSS/progress). See the [example live](https://mdn.github.io/dom-examples/css-progress).
Expand Down
74 changes: 74 additions & 0 deletions css-carousels/scroll-button-scroll-marker-with-columns/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS carousel demo</title>

<link href="styles.css" rel="stylesheet" />
</head>
<body>
<h1>CSS carousel demo 2</h1>
<ul>
<li>
<h2>Content 1</h2>
<p><a href="#">A demo link</a>.</p>
</li>
<li>
<h2>Content 2</h2>
<p><a href="#">A demo link</a>.</p>
</li>
<li>
<h2>Content 3</h2>
<p><a href="#">A demo link</a>.</p>
</li>
<li>
<h2>Content 4</h2>
<p><a href="#">A demo link</a>.</p>
</li>
<li>
<h2>Content 5</h2>
<p><a href="#">A demo link</a>.</p>
</li>
<li>
<h2>Content 6</h2>
<p><a href="#">A demo link</a>.</p>
</li>
<li>
<h2>Content 7</h2>
<p><a href="#">A demo link</a>.</p>
</li>
<li>
<h2>Content 8</h2>
<p><a href="#">A demo link</a>.</p>
</li>
<li>
<h2>Content 9</h2>
<p><a href="#">A demo link</a>.</p>
</li>
<li>
<h2>Content 10</h2>
<p><a href="#">A demo link</a>.</p>
</li>
<li>
<h2>Content 11</h2>
<p><a href="#">A demo link</a>.</p>
</li>
<li>
<h2>Content 12</h2>
<p><a href="#">A demo link</a>.</p>
</li>
<li>
<h2>Content 13</h2>
<p><a href="#">A demo link</a>.</p>
</li>
<li>
<h2>Content 14</h2>
<p><a href="#">A demo link</a>.</p>
</li>
<li>
<h2>Content 15</h2>
<p><a href="#">A demo link</a>.</p>
</li>
</ul>
</body>
</html>
158 changes: 158 additions & 0 deletions css-carousels/scroll-button-scroll-marker-with-columns/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
/* General styles */

* {
box-sizing: border-box;
}

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

h1 {
text-align: center;
}

button {
background-color: white;
}

/* General styling of list as scrolling carousel */

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

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

columns: 1;
text-align: center;
}

li {
list-style-type: none;

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

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

text-align: left;

view-timeline: --inertChange inline;
animation-timeline: --inertChange;
animation-name: inert-change;
animation-fill-mode: both;
}

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

/* Keyframes for setting inertness on pages outside the scroller */

@keyframes inert-change {
entry 0%,
exit 100% {
interactivity: inert;
}

entry 1%,
exit 99% {
interactivity: auto;
}
}

/* CSS scroll buttons */

/* Style the scroll buttons */

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: "►";
}

/* Position the scroll buttons */

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) + 21px);
}

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

/* Scroll marker styling */

ul {
/* Needed for the pseudo to be generated */
scroll-marker-group: after;
}

/* Once tabbed to, the scroll marker group can then be moved through via the cursor keys */
/* It in effect acts as a single control for tabbing purposes */
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;
}

ul::column::scroll-marker {
content: "";
width: 16px;
height: 16px;
background-color: transparent;
border: 2px solid black;
border-radius: 10px;
/* This is needed because non-current targets are made inert */
interactivity: auto;
}

ul::column::scroll-marker:target-current {
background-color: black;
}
38 changes: 38 additions & 0 deletions css-carousels/scroll-button-scroll-marker/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>CSS carousel demo</title>

<link href="styles.css" rel="stylesheet" />
</head>
<body>
<h1>CSS carousel demo 1</h1>
<ul>
<li>
<h2>Page 1</h2>
<p>This is the first page of content.</p>
<p><a href="#">A demo link</a>.</p>
<p><button>Press me</button></p>
</li>
<li>
<h2>Page 2</h2>
<p>This is the second page of content.</p>
<p><a href="#">A demo link</a>.</p>
<p><button>Press me</button></p>
</li>
<li>
<h2>Page 3</h2>
<p>This is the third page of content.</p>
<p><a href="#">A demo link</a>.</p>
<p><button>Press me</button></p>
</li>
<li>
<h2>Page 4</h2>
<p>This is the fourth page of content.</p>
<p><a href="#">A demo link</a>.</p>
<p><button>Press me</button></p>
</li>
</ul>
</body>
</html>
Loading