大家好，本日我们将一起学习下如何从零开始创建一个具有缩略图功能的相应式幻灯片。这个案例我们无需编写任何 JavaScript 代码，这里紧张利用了 CSS checkbox hack 的技能进行实现。
这篇文章利用了繁芜的CSS选择器、flex box 和 Grid 布局、 CSS checkbox 的伪类选择器 checked 等技能
一、 首先看看幻灯的效果展示如视频所示，一个功能完备俊秀的幻灯片图片组件。
视频加载中...
二、创建 HTML 构造1、首先我们准备3张图片素材。
2、接下来我们新建3个radio按钮，通过name属性进行按钮分组
<input type="radio" id="image1" name="image" checked><input type="radio" id="image2" name="image"><input type="radio" id="image3" name="image">
3、然后我们创建 .featured-wrapper 和 .thumb-list 两个容器，放置内容元素
3.1、.featured-wrapper 元素包含3个列表：
1、一个大图列表，一次只能显示一个图片
2、一组箭头列表，用于大图切换
3、一组圆圈列表，用于大图切换
这里我们利用label标签技巧与radio表单进行对应代替JS事宜点击，同一个 radio 可以关联多个与之对应的 label 标签。
3.2、.thumb-list 容器包含一组图片缩略图，与大图对应，用于切换大图。
总而言之，我们说了这么多，我们可以通过箭头、圈圈、缩略图进行幻灯大图的切换，整体的 HTML 构造如下图所示：
基于上图所示，终极完成的 HTML 代码构造如下：
<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>三、定义样式
1、将 radio 按钮移除至屏幕外，示例代码如下:
input[type="radio"] { position: absolute; bottom: 0; left: -9999px;}
这里你会把稳到，我利用了bottom: 0，紧张为了防止每次点击标签时，浏览器跳至页面顶部。虽然不是最佳实践，但是这个方法对本案例有效，还有一个更好的做法，我们可以设置display: none，但是不符合键盘可访问性（accessibility）的标准，这里还是推举 bottom: 0;
2、定义最外层 container 容器的样式，设置最大宽度以及让其水平居中
.container { max-width: 450px; padding: 0 20px; margin: 0 auto;}
3、定义大图列表样式
为了只显示一张大图，其他图片将会被挡住并且隐蔽，你可能最先想到的是改变文档正常流，利用position属性进行定位的方法进行隐蔽，这里你须要把稳图片的宽高比，常日利用固定高度的办理方案，在这个案例中，我们利用CSS的Grid新布局，将图片放置在1行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;}
4、定义小圆圈样式
我们须要将小圆圈定位在 .featured-wrapper 容器底部，点击相应圆圈进行切换大图：
相应的CSS代码如下所示：
/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;}
5、定义箭头样式
接下来我们连续定义箭头切换的样式，我们将其放置在.featured-wrapper容器，如下图所示：
这里须要把稳的是，这些箭头与 radio 按钮逐一对应关联，这里我们用到了::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;}
6、定义缩略图元素样式
每个缩略图霸占父容器的三分之一，如下图所示：
在这里，为了将图片标题放置在图片之上，我们用的不是传统的CSS定位，这里我们运用了CSS Grid技巧。
我们将每个缩略图变成单一网格（一行一列），并利用grid垂直居中的技巧 place-items: center 让文本垂直居中，干系代码如下所示：
.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;}四、利用 Checkbox Hack 切换图片
接下来是本案例的核心，也是最有趣的地方，我们利用 checkbox hack 的技能仿照JS的点击事宜。
每次点击缩略图，相应的箭头和圆圈都会处于活动状态：
相应的幻灯片大图可见对应的圆圈背景变成白色缩略图对应的笔墨标题将会涌现箭头导航将会更新对应干系图片的链接基于以上需求终极完成的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 技能有了更清楚的认识，希望你能够适应这项技能，并将其利用到自己的项目中。
干系阅读动手练一练，做一个当代化、相应式的后台管理首页
利用 Vanilla JavaScript 框架创建一个大略的景象运用
动手练一练，利用 Flexbox 创建一个相应式的表单
动手练一练，用纯 CSS 制作一款侧滑显示留言面板的网页组件
利用 CSS Checkbox Hack 技能制作一个手风琴组件
