今天完成的事情，任务14，轮播图。

在网上找到了一篇特别好用的实例，在网页上面跑了一下，发现还能用。还顺带了思路图，拿完就跑啊！

轮播图由三个部分组成，wrap包裹图片盒子，label-one绑定两个左右切换按钮，与label-two绑定底部指示器。

<div class="wrap">
    <img src="img-website/slideshow-one.png" alt="轮播图">
    <img src="img-website/slideshow-two.jpg" alt="轮播图">
    <img src="img-website/slideshow-three.png" alt="轮播图">
</div>

设置图片的时候，遇到的问题是，我不知道该把三张幻灯片设置宽度设置为多少合适。因为轮播图图片是要铺满全屏的，肯定是百分比单位啊。但是发现，

百分比好像并不好用。

看了几篇实例发现是思路上面出现了问题。三张图片铺满全屏的情况下。把轮播图的宽度设置为300vw，之后。

overflow: hidden;溢出的部分隐藏掉。

.wrap {
  position: relative;
  width: 300vw;
  overflow: hidden;
}
.wrap img {
  display: inline-block;
  width: 100vw;
  height: auto;
  float: left;
}

把wrap包裹的图片单位宽度设置为300vw，之前说到设置溢出隐藏之后。wrap中的图片单位为100vw。

<input type="radio" name="slider" id="pic1" checked>
<input type="radio" name="slider" id="pic2">
<input type="radio" name="slider" id="pic3">

#pic1:checked ~ .wrap {
  left: 0;
}
#pic2:checked ~ .wrap {
  left: -100vw;
}
#pic3:checked ~ .wrap {
  left: -200vw;

input表单绑定wrap，之后设置图片的应该摆放的位置。

遇到的第二个问题是，左右切换按钮如何设置。如何保证，他切换到第二张图片的时候，点击右边按钮跳转第三张，点击左右回到第一张图片。

<div class="arrow">
    <label class="arrowhead" for="pic1"></label>
    <label class="arrowhead" for="pic2"></label>
    <label class="arrowhead" for="pic3"></label>
</div>

label设置的name，需要与上面的复选框name保持一致。

把arrowheah，按钮开关样式隐藏掉，因为页面只需要始终保持有2个按钮就够了。但是我们为什么要去写第三个按钮呢，

因为

C跳转-A-跳转-B-跳转-C-跳转-A

两个按钮是无法完成的。

#pic1:checked ~ .arrow label:nth-of-type(3),
#pic2:checked ~ .arrow label:nth-of-type(1),
#pic3:checked ~ .arrow label:nth-of-type(2) {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 5rem;
  transform: rotate(-135deg);
}

设置图片切换按钮跳转。

input：nth-of-type（n）是选择input的父元素的第n个子元素，也可以给input加上id来代替。

收获，今天把轮播图写完了，关于lebel绑定复选框触发点击事件，轮播图跳转的逻辑。bootstrap真的好用！！！！！！！