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

在这个新教程中，我们将学习如何从头开始创建带有缩略图的功能齐全的响应式图像幻灯片。为了完成它，我们不需要编写一行 javascript。事实上，再一次，我们将只使用 html 和 css，因为我们利用了“CSS 复选框 hack 技术”。 

我们的响应式 CSS 幻灯片

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

See the Pen  How to Build a Simple Slideshow With the CSS Checkbox Hack by Envato Tuts+ (@tutsplus)  on CodePen.

1. 从 HTML 标记开始

出于本练习的目的，我们将从Unsplash中抓取三张图像。

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

<input type="radio" id="image1" name="image" checked>

<input type="radio" id="image2" name="image">

<input type="radio" id="image3" name="image">

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

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

• 第一个列表将保存幻灯片图像。一次只会出现一张图片。 

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

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

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

简而言之，我们的幻灯片将为用户提供通过点、箭头和缩略图在幻灯片之间切换的能力。尼斯！

最终的 HTML 结构

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

综上所述，这是我们容器的结构：

<div class="container">

  <div class="featured-wrapper">

    <ul class="featured-list">

      <li>

        <figure>

          <img src="IMG_SRC" alt="">

        </figure>

      </li>

      <!-- other two list items here -->

    </ul>

    <ul class="arrows">

      <li>

        <label for="image1"></label>

      </li>

      <li>

        <label for="image2"></label>

      </li>

      <li>

        <label for="image3"></label>

      </li>

    </ul>

    <ul class="dots">

      <li>

        <label for="image1"></label>

      </li>

      <li>

        <label for="image2"></label>

      </li>

      <li>

        <label for="image3"></label>

      </li>

    </ul>

  </div>

  <ul class="thumb-list">

    <li>

      <label for="image1">

        <img src="IMG_SRC" alt="">

        <span class="outer">

          <span class="inner">...</span>

        </span>

      </label>

    </li>

    <!-- other two list items here -->

  </ul>

</div>

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

2. 定义样式

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

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

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

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

大图像

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

为了堆叠图像，令人惊讶的是，我们不会使用 commonposition属性。通常，您可能期望我们将图像转换为绝对定位的元素。但是这种方法有一个很大的缺点：绝对元素从正常的文档流中删除，所以我们必须找到一种方法来保持图像的纵横比。例如，一个粗略的、不优雅的解决方案可能是为图像的容器添加一个固定的高度。

这就是 CSS Grid 等新的 CSS 添加的地方，特别是如果您只对现代浏览器感兴趣。因此，首先，我们将列表作为一个网格容器，然后我们将通过赋予它们grid-row: 1和来将其项目定位在同一个单元格中grid-column: 1。 

这是相应的CSS：

.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元素的底部。它的每个标签都有一个圆圈的外观，如下所示：

以下是相关样式：

/*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伪元素。

以下是所需的样式：

/*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，它的内容将水平和垂直居中。

以下是目标样式：

/*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：在幻灯片之间切换

现在让我们玩得开心！由于复选框黑客和模仿 JavaScript 的click事件，我们将推动 CSS 的边界。 

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

• 活动幻灯片将变得可见。

• 活动点将收到白色背景颜色。

• 将出现活动缩略图的标题。

• 将出现活动幻灯片的上一个和下一个箭头。这些将分别链接到其上一张幻灯片和下一张幻灯片。

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

/*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 checkbox hack 技术”设法构建了一个带有缩略图的响应式纯 CSS 幻灯片。希望您喜欢这个练习，并将其整合到即将到来的项目中。

以下是我们构建的内容的提醒：

See the Pen  How to Build a Simple Slideshow With the CSS Checkbox Hack by Envato Tuts+ (@tutsplus)  on CodePen.

最后，我想说的是，毫无疑问，CSS 复选框 hack 技术是增强您的 CSS 知识的好方法。另一方面，在实际项目中，我们应该意识到它的局限性（可访问性、标记）以及何时值得使用 ιt 而不是 javaScript 替代品。