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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add CSS carousel examples #302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 @@ -21,6 +21,8 @@ Code examples that accompany various MDN DOM and Web API documentation pages.

- The "channel-messaging-multimessage" directory contains another channel messaging demo, showing how multiple messages can be sent between browsing contexts. See [Channel Messaging API](https://developer.mozilla.org/docs/Web/API/Channel_Messaging_API) for more details. [Run the demo live](https://mdn.github.io/dom-examples/channel-messaging-multimessage/).

- 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 "device-posture-api" directory contains an example demonstrating how to use the [Device Posture API](https://developer.mozilla.org/docs/Web/API/Device_Posture_API). [Run the example live](https://mdn.github.io/dom-examples/device-posture-api/).
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