今日完成：

给轮播图加上按钮，使其可以手动控制。

使用input的单选按钮来实现，通过checked状态可以与图片关联起来切换。

先做通过按钮来控制单选按钮：

<input type="radio" id="p1" name="slider" checked>
<input type="radio" id="p2" name="slider">
<input type="radio" id="p3" name="slider">

左切换按钮：

<div class="icon-left">
    <label for="p1"></label>
    <label for="p2"></label>
    <label for="p3"></label>
</div>

右切换按钮：

<div class="icon-right">
    <label for="p1"></label>
    <label for="p2"></label>
    <label for="p3"></label>
</div>

左切换按钮的三角样式

.icon-left label {
    display: none;
    width: 2rem;
    height: 2rem;
    border-top: 1rem solid #000;
    border-right: 1rem solid #000;
    transform: rotate(-135deg);
}

#p1:checked ~ .icon-left label:nth-of-type(3),
#p2:checked ~ .icon-left label:nth-of-type(1),
#p3:checked ~ .icon-left label:nth-of-type(2) {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: -30rem;
}

通过nth-of-type(n)选择器来匹配父元素的第n个元素。

当第1个单选框为选中状态时，展示的左切换按钮为与第3个单选框关联的label。这时点击按钮，就会切换到第三单选框。

以此类推：3----->2,  2----->1, 1----->3  

右切换按钮和这个相反：

.icon-right  label{
    display: none;
    width: 2rem;
    height: 2rem;
    border-left: 1rem solid #000;
    border-bottom: 1rem  solid #000;
    transform: rotate(-135deg);
}

#p1:checked ~ .icon-right label:nth-of-type(2),
#p2:checked ~ .icon-right label:nth-of-type(3),
#p3:checked ~ .icon-right label:nth-of-type(1) {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: -30rem;
}

加入图片

<div class="wrap">
    <img src="../img/banner_02.jpg" alt="">
    <img src="../img/banner3.png" alt=".">
    <img src="../img/banner4.jpeg" alt=".">
</div>

.wrap {
  position: relative;
  width: 300vw;
  overflow: hidden;
}

.wrap img {
  display: inline-block;
  width: 100vw;
  height: auto;
  float: left;
}

将图片的切换与单选框关联起来

#p1:checked ~ .wrap {
  left: 0;
  transition: 1s linear;
}

#p2:checked ~ .wrap {
  left: -100vw;
  transition: 1s linear;
}

#p3:checked ~ .wrap {
  left: -200vw;
  transition: 1s linear;
}