如何使用CSS Checkbox Hack构建简单的幻灯片

在这个新教程中，我们将学习如何从头开始创建具有缩略图的功能齐全的响应式图像幻灯片。为此，我们不需要编写任何JavaScript代码。实际上，再一次，由于我们利用了“ CSS checkbox hack技术”，因此我们将仅使用HTML和CSS。

我们的响应式CSS幻灯片

这是我们将在本教程中创建的幻灯片（请确保查看完整的CodePen版本以防止页面跳至顶部）：

1.从HTML标记开始

在本练习中，我们将从Unsplash中获取三张图像。

然后，我们将创建相应的单选按钮，并将其分组在image关键字下：

1
2
3

接下来，我们将.featured-wrapper和.thumb-list元素放入容器中。

.featured-wrapper元素将包含三个列表：

第一个列表将保存幻灯片图像。一次只能显示一个图像。
其他两个相同的列表将用于在图像/幻灯片之间导航。两个列表都将包含其for值与上述单选按钮的id值匹配的标签。

提示：在我们的示例中，我们将单选按钮与多个标签相关联。这是完全有效的。

.thumb-list元素还将包括幻灯片图像及其描述。但是，与.featured-list元素的图像不同，这些图像将始终可见并用于缩略图导航。

简而言之，我们的幻灯片演示将使用户能够通过点，箭头和缩略图在幻灯片之间切换。 Niiice！

最终HTML结构

默认情况下，第一张图像应该是可见/活动的。考虑到这一点，我们将checked属性添加到第一个单选按钮。

放在一起，这是我们容器的结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

注意：在里面每个标签.thumb-list ，我不使用的块级figure和figcaption元素，因为W3C验证将抛出一个错误。我们将坚持使用内联元素。

2.定义样式

在样式方面，我们首先将单选按钮移出屏幕来在视觉上隐藏它们：

1
2
3
4
5

input[type="radio"] {
position: absolute;
bottom: 0;
left: -9999px;
}

注意：我添加了bottom: 0属性值，以防止每次单击标签时浏览器跳至页面顶部。显然，这不是理想的方法，但它似乎在这里发挥了作用。作为一般经验法则，请记住，此属性的值（或其相对的top一个）应取决于幻灯片的大小。另外，作为一种更稳定的解决方案，我可以设置display: none ，但是由于键盘的可访问性限制，不建议这样做。具体而言，该样式将防止箭头键更改所选的单选按钮。

和往常一样，我们的容器的最大宽度将为水平居中的内容：

1
2
3
4
5

.container {
max-width: 450px;
padding: 0 20px;
margin: 0 auto;
}

大图

默认情况下，所有精选图像将堆叠在另一个图像之上。除了与选中的单选按钮关联的图像之外，它们都将被隐藏。

要堆叠图像，令人惊讶的是，我们将不使用common position属性。通常，您可能期望将图像转换为绝对定位的元素。但是该方法有一个很大的缺点：从常规文档流中删除了绝对元素，因此我们必须找到一种方法来保留图像的宽高比。例如，一个粗略，不雅致的解决方案可能是在图像容器中添加固定高度。

这就是拯救CSS Grid等新CSS的地方，特别是如果您仅对现代浏览器感兴趣的话。因此，首先，我们使列表表现为一个网格容器，然后通过为它们提供grid-row: 1和grid-column: 1将其项放置在同一单元grid-row: 1 。

这是相应CSS：

1
2
3
4
5
6
7
8
9
10

.featured-wrapper .featured-list {
display: grid;
}

.featured-wrapper .featured-list li {
grid-column: 1;
grid-row: 1;
opacity: 0;
transition: opacity 0.25s;
}

点

点导航将绝对定位并位于.featured-wrapper元素的底部。每个标签都将具有圆形外观，如下所示：

以下是相关样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/*CUSTOM VARIABLES HERE*/

.featured-wrapper {
position: relative;
}

.featured-wrapper .dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
}

.featured-wrapper .dots li:not(:last-child) {
margin-right: 8px;
}

.featured-wrapper .dots label {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid var(--white);
transition: background 0.25s;
}

.featured-wrapper .dots label:hover {
background: currentColor;
}

箭

导航箭头将绝对位于.featured-wrapper元素内：

请记住，只会显示与选中的单选按钮关联的标签的箭头。要创建它们，我们将使用目标标签的::before和::after伪元素。

以下是必需的样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/*CUSTOM VARIABLES HERE*/

.featured-wrapper .arrows label::before,
.featured-wrapper .arrows label::after {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
color: var(--black);
background-position: center;
background-repeat: no-repeat;
background-size: 24px 24px;
background-color: var(--white);
opacity: 0.5;
transition: opacity 0.25s;
}

.featured-wrapper .arrows label::before {
left: 10px;
}

.featured-wrapper .arrows label::after {
right: 10px;
}

缩图

每个缩略图将覆盖父级宽度的三分之一，如下所示：

要将标题放置在其图像的顶部，而不是使用传统CSS定位，我们将利用之前学习CSS Grid技巧。

我们将把标签变成一个网格元素，并迫使孩子覆盖整个尺寸。默认情况下，将仅显示与选中的单选按钮关联的标题。同样，由于CSS Grid，其内容将在水平和垂直方向上居中。

以下是目标样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

/*CUSTOM VARIABLES HERE*/

.thumb-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 20px;
margin-top: 20px;
}

.thumb-list label {
display: grid;
}

.thumb-list img,
.thumb-list .outer {
grid-column: 1;
grid-row: 1;
}

.thumb-list .outer {
display: grid;
place-items: center;
transition: background 0.25s;
}

.thumb-list .inner {
font-size: 18px;
opacity: 0;
transform: translateY(20px);
transition: all 0.25s;
}

3. Checkbox Hack：在幻灯片之间切换

现在让我们玩得开心！我们将通过复选框hack和模仿JavaScript的click事件来突破CSS的界限。

因此，每次单击缩略图，点或箭头（即变为活动状态）时，都会发生以下情况：

活动幻灯片将变得可见。
活动点将收到白色背景色。
活动缩略图的标题将出现。
活动幻灯片的上一个和下一个箭头将出现。这些将分别链接到其上一张幻灯片和下一张幻灯片。

以下是处理此功能的样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

/*CUSTOM VARIABLES HERE*/

[id="image1"]:checked ~ .container .featured-list li:nth-child(1),
[id="image2"]:checked ~ .container .featured-list li:nth-child(2),
[id="image3"]:checked ~ .container .featured-list li:nth-child(3),
[id^="image"]:checked ~ .container .arrows [for^="image"]:hover::before,
[id^="image"]:checked ~ .container .arrows [for^="image"]:hover::after {
opacity: 1;
}

[id="image1"]:checked ~ .container .arrows [for="image3"]::before,
[id="image2"]:checked ~ .container .arrows [for="image1"]::before,
[id="image3"]:checked ~ .container .arrows [for="image2"]::before {
content: ’’;
background-image: url(arrow-prev-slideshow.svg);
}

[id="image1"]:checked ~ .container .arrows [for="image2"]::after,
[id="image2"]:checked ~ .container .arrows [for="image3"]::after,
[id="image3"]:checked ~ .container .arrows [for="image1"]::after {
content: ’’;
background-image: url(arrow-next-slideshow.svg);
}

[id="image1"]:checked ~ .container .dots [for="image1"],
[id="image2"]:checked ~ .container .dots [for="image2"],
[id="image3"]:checked ~ .container .dots [for="image3"] {
background: currentColor;
}

[id="image1"]:checked ~ .container [for="image1"] .outer,
[id="image2"]:checked ~ .container [for="image2"] .outer,
[id="image3"]:checked ~ .container [for="image3"] .outer {
background: var(--overlay);
}

[id="image1"]:checked ~ .container [for="image1"] .inner,
[id="image2"]:checked ~ .container [for="image2"] .inner,
[id="image3"]:checked ~ .container [for="image3"] .inner {
opacity: 1;
transform: none;
}

您可能需要一些时间来了解上述样式的工作方式。在这种情况下，浏览器检查器是您最好的朋友！

结论

就是这样，伙计们！在本教程中，我们通过利用“ CSS复选框黑客技巧”设法构建了一个带有缩略图的响应式纯CSS幻灯片。希望您喜欢这个练习，并将其纳入下一个项目中。

这提醒我们建立了什么：

最后，我想说毫无疑问，CSS复选框黑客技术是增强CSS知识的好方法。另一方面，在实际项目中，我们应该意识到它的局限性（可访问性，标记），以及何时应该使用alt代替JavaScript替代方案。

您是否曾经使用复选框hack构建了一些有趣的东西？让我们知道！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-build-a-simple-slideshow-with-the-css-checkbox-hack--cms-34465