Skip to content

Commit 3f44f83

Browse files
chrisdavidmillspepelsbey
chrisdavidmills
and
pepelsbey
authored
Add CSS carousel examples (#302)
* Add CSS carousel examples * Update css-carousels/scroll-button-scroll-marker-with-columns/styles.css Co-authored-by: Vadim Makeev <[email protected]> * Update css-carousels/scroll-button-scroll-marker/styles.css Co-authored-by: Vadim Makeev <[email protected]> --------- Co-authored-by: Vadim Makeev <[email protected]>
1 parent 20fcbce commit 3f44f83

File tree

5 files changed

+420
-0
lines changed

5 files changed

+420
-0
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ Code examples that accompany various MDN DOM and Web API documentation pages.
2323

2424
- 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/).
2525

26+
- 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/).
27+
2628
- 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).
2729

2830
- 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).

‎css-carousels/scroll-button-scroll-marker-with-columns/index.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>CSS carousel demo</title>
6+
7+
<link href="styles.css" rel="stylesheet" />
8+
</head>
9+
<body>
10+
<h1>CSS carousel demo 2</h1>
11+
<ul>
12+
<li>
13+
<h2>Content 1</h2>
14+
<p><a href="#">A demo link</a>.</p>
15+
</li>
16+
<li>
17+
<h2>Content 2</h2>
18+
<p><a href="#">A demo link</a>.</p>
19+
</li>
20+
<li>
21+
<h2>Content 3</h2>
22+
<p><a href="#">A demo link</a>.</p>
23+
</li>
24+
<li>
25+
<h2>Content 4</h2>
26+
<p><a href="#">A demo link</a>.</p>
27+
</li>
28+
<li>
29+
<h2>Content 5</h2>
30+
<p><a href="#">A demo link</a>.</p>
31+
</li>
32+
<li>
33+
<h2>Content 6</h2>
34+
<p><a href="#">A demo link</a>.</p>
35+
</li>
36+
<li>
37+
<h2>Content 7</h2>
38+
<p><a href="#">A demo link</a>.</p>
39+
</li>
40+
<li>
41+
<h2>Content 8</h2>
42+
<p><a href="#">A demo link</a>.</p>
43+
</li>
44+
<li>
45+
<h2>Content 9</h2>
46+
<p><a href="#">A demo link</a>.</p>
47+
</li>
48+
<li>
49+
<h2>Content 10</h2>
50+
<p><a href="#">A demo link</a>.</p>
51+
</li>
52+
<li>
53+
<h2>Content 11</h2>
54+
<p><a href="#">A demo link</a>.</p>
55+
</li>
56+
<li>
57+
<h2>Content 12</h2>
58+
<p><a href="#">A demo link</a>.</p>
59+
</li>
60+
<li>
61+
<h2>Content 13</h2>
62+
<p><a href="#">A demo link</a>.</p>
63+
</li>
64+
<li>
65+
<h2>Content 14</h2>
66+
<p><a href="#">A demo link</a>.</p>
67+
</li>
68+
<li>
69+
<h2>Content 15</h2>
70+
<p><a href="#">A demo link</a>.</p>
71+
</li>
72+
</ul>
73+
</body>
74+
</html>

‎css-carousels/scroll-button-scroll-marker-with-columns/styles.css‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
/* General styles */
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
margin: 0;
9+
font-family: Arial, Helvetica, sans-serif;
10+
}
11+
12+
h1 {
13+
text-align: center;
14+
}
15+
16+
button {
17+
background-color: white;
18+
}
19+
20+
/* General styling of list as scrolling carousel */
21+
22+
ul {
23+
width: 100%;
24+
height: 400px;
25+
padding: 10px;
26+
27+
overflow-x: scroll;
28+
scroll-snap-type: x mandatory;
29+
30+
columns: 1;
31+
text-align: center;
32+
}
33+
34+
li {
35+
list-style-type: none;
36+
37+
display: inline-block;
38+
height: 100%;
39+
aspect-ratio: 2/3;
40+
41+
background-color: #eee;
42+
border: 1px solid #ddd;
43+
padding: 20px;
44+
margin: 0 20px;
45+
46+
text-align: left;
47+
48+
view-timeline: --inertChange inline;
49+
animation-timeline: --inertChange;
50+
animation-name: inert-change;
51+
animation-fill-mode: both;
52+
}
53+
54+
ul::column {
55+
scroll-snap-align: center;
56+
}
57+
58+
/* Keyframes for setting inertness on pages outside the scroller */
59+
60+
@keyframes inert-change {
61+
entry 0%,
62+
exit 100% {
63+
interactivity: inert;
64+
}
65+
66+
entry 1%,
67+
exit 99% {
68+
interactivity: auto;
69+
}
70+
}
71+
72+
/* CSS scroll buttons */
73+
74+
/* Style the scroll buttons */
75+
76+
ul::scroll-button(*) {
77+
border: 0;
78+
font-size: 2rem;
79+
background: none;
80+
color: rgb(0 0 0 / 0.7);
81+
cursor: pointer;
82+
}
83+
84+
ul::scroll-button(*):hover,
85+
ul::scroll-button(*):focus {
86+
color: rgb(0 0 0 / 1);
87+
}
88+
89+
ul::scroll-button(*):active {
90+
translate: 1px 1px;
91+
}
92+
93+
ul::scroll-button(*):disabled {
94+
color: rgb(0 0 0 / 0.2);
95+
}
96+
97+
ul::scroll-button(left) {
98+
content: "◄";
99+
}
100+
101+
ul::scroll-button(right) {
102+
content: "►";
103+
}
104+
105+
/* Position the scroll buttons */
106+
107+
ul {
108+
anchor-name: --myCarousel;
109+
}
110+
111+
ul::scroll-button(*) {
112+
position: absolute;
113+
position-anchor: --myCarousel;
114+
}
115+
116+
ul::scroll-button(left) {
117+
right: calc(anchor(left) - 70px);
118+
bottom: calc(anchor(top) + 21px);
119+
}
120+
121+
ul::scroll-button(right) {
122+
left: calc(anchor(right) - 70px);
123+
bottom: calc(anchor(top) + 21px);
124+
}
125+
126+
/* Scroll marker styling */
127+
128+
ul {
129+
/* Needed for the pseudo to be generated */
130+
scroll-marker-group: after;
131+
}
132+
133+
/* Once tabbed to, the scroll marker group can then be moved through via the cursor keys */
134+
/* It in effect acts as a single control for tabbing purposes */
135+
ul::scroll-marker-group {
136+
position: absolute;
137+
position-anchor: --myCarousel;
138+
top: calc(anchor(bottom) - 70px);
139+
justify-self: anchor-center;
140+
display: flex;
141+
justify-content: center;
142+
gap: 20px;
143+
}
144+
145+
ul::column::scroll-marker {
146+
content: "";
147+
width: 16px;
148+
height: 16px;
149+
background-color: transparent;
150+
border: 2px solid black;
151+
border-radius: 10px;
152+
/* This is needed because non-current targets are made inert */
153+
interactivity: auto;
154+
}
155+
156+
ul::column::scroll-marker:target-current {
157+
background-color: black;
158+
}

‎css-carousels/scroll-button-scroll-marker/index.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>CSS carousel demo</title>
6+
7+
<link href="styles.css" rel="stylesheet" />
8+
</head>
9+
<body>
10+
<h1>CSS carousel demo 1</h1>
11+
<ul>
12+
<li>
13+
<h2>Page 1</h2>
14+
<p>This is the first page of content.</p>
15+
<p><a href="#">A demo link</a>.</p>
16+
<p><button>Press me</button></p>
17+
</li>
18+
<li>
19+
<h2>Page 2</h2>
20+
<p>This is the second page of content.</p>
21+
<p><a href="#">A demo link</a>.</p>
22+
<p><button>Press me</button></p>
23+
</li>
24+
<li>
25+
<h2>Page 3</h2>
26+
<p>This is the third page of content.</p>
27+
<p><a href="#">A demo link</a>.</p>
28+
<p><button>Press me</button></p>
29+
</li>
30+
<li>
31+
<h2>Page 4</h2>
32+
<p>This is the fourth page of content.</p>
33+
<p><a href="#">A demo link</a>.</p>
34+
<p><button>Press me</button></p>
35+
</li>
36+
</ul>
37+
</body>
38+
</html>

0 commit comments

Comments
 (0)