请问一下，我这个纯CSS无缝轮播图该如何解决左侧点击按钮点击轮播问题

Question

想写个纯CSS无缝轮播，包含轮播焦点点击轮播功能、左右按钮点击轮播功能、最后轮播焦点和图片自动轮播、鼠标悬停下轮播焦点和图片自动轮播停止...

我就是想用纯CSS写js的轮播功能，尽管没什么实用...

我的代码结构如下

<div class="outer">
    <div class="test">
        <input type="radio" name="slides" id="slide1" checked>
        <input type="radio" name="slides" id="slide2">
        <input type="radio" name="slides" id="slide3">
        <input type="radio" name="slides" id="slide4">
        <input type="radio" name="slides" id="slide5">
        <input type="radio" name="slides" id="slide6">
        <input type="radio" name="slides" id="slide7">
        <ul class="slideWrap">
            <li class="slide slide-1"></li>
            <li class="slide slide-2"></li>
            <li class="slide slide-3"></li>
            <li class="slide slide-4"></li>
            <li class="slide slide-5"></li>
            <li class="slide slide-6"></li>
            <li class="slide slide-7"></li>
        </ul>
        <div class="side-controls">
            <label for="slide1"></label>
            <label for="slide2"></label>
            <label for="slide3"></label>
            <label for="slide4"></label>
            <label for="slide5"></label>
            <label for="slide6"></label>
            <label for="slide7" style="display: none;"></label>
        </div>
        <div class="controls">
            <label for="slide1"></label>
            <label for="slide2"></label>
            <label for="slide3"></label>
            <label for="slide4"></label>
            <label for="slide5"></label>
            <label for="slide6"></label>
            <label for="slide7" style="display: none;"></label>
        </div>
    </div>
</div>

<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
    }
    body {
        font-size: 24px;
        font-family: Cursive; 
    }
    .outer{
        width: 1000px;
        height: 600px;
        margin: 50px auto;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        background-color: #EFEFEF;
        box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    }

    .test{
        width: 900px;
        height: 500px;
        overflow: hidden;
        position: relative;
        border-radius: 10px;
        border: 10px solid;
        clip-path: inset(0px round 10px);
        border-image: linear-gradient(45deg,#EACCF8,#ee9ca7,#69EACB) 1;
    }

    .slideWrap{
        width: 700%;
        height: 100%;
        position: relative;
        transition: transform 0.1s ease;
    }

    .slide{
        float: left;
        width: 900px;
        height: inherit;
    }
    .slide-1{
        background: url("qq截图/lyf1.jpg") no-repeat 0 0 / 100% 100%;
    }
    .slide-2{
        background: url("qq截图/lyf2.jpg") no-repeat 0 0 / 100% 100%;
    }
    .slide-3{
        background: url("qq截图/lyf3.jpg") no-repeat 0 0 / 100% 100%;
    }
    .slide-4{
        background: url("qq截图/lyf4.jpg") no-repeat 0 0 / 100% 100%;
    }
    .slide-5{
        background: url("qq截图/lyf-5.jpg") no-repeat 0 0 / 100% 100%;
    }
    .slide-6{
        background: url("qq截图/lyf-6.jpg") no-repeat 0 0 / 100% 100%;
    }
    .slide-7{
        background: url("qq截图/lyf1.jpg") no-repeat 0 0 / 100% 100%;
    }

    input{
        display: none;
    }

    .controls {
        left: 50%;
        bottom: 10px;
        display: flex;
        position: absolute;
        transform: translateX(-50%);
    }
    .controls label {
        height: 10px;
        width: 30px;
        margin: 0 10px;
        cursor: pointer;
        background-color: #fff;
        transition: background-color .5s;
    }

    .controls label:hover{
        background-color: rgba(255,0,0,0.3);
    }
    #slide1:checked ~ .controls label:nth-of-type(1), 
    #slide2:checked ~ .controls label:nth-of-type(2), 
    #slide3:checked ~ .controls label:nth-of-type(3), 
    #slide4:checked ~ .controls label:nth-of-type(4), 
    #slide5:checked ~ .controls label:nth-of-type(5), 
    #slide6:checked ~ .controls label:nth-of-type(6),
    #slide7:checked ~ .controls label:nth-of-type(7),
    #slide7:checked ~ .controls label:nth-of-type(1){
        background-color: red;
    }

    #slide1:checked ~ .slideWrap{
        transform: translateX(0px);
    }
    #slide2:checked ~ .slideWrap{
        transform: translateX(-900px);
    }
    #slide3:checked ~ .slideWrap{
        transform: translateX(-1800px);
    }
    #slide4:checked ~ .slideWrap{
        transform: translateX(-2700px);
    }
    #slide5:checked ~ .slideWrap{
        transform: translateX(-3600px);
    }
    #slide6:checked ~ .slideWrap{
        transform: translateX(-4500px);
    }
    #slide7:checked ~ .slideWrap{
        transform: translateX(-5400px);
    }

    .side-controls label {
        position: absolute;
        width: 24px;
        height: 44px;
        top: 50%;
        margin-top: -15px;
        cursor: pointer;
        opacity: .7;
        transition: opacity .5s;
    }

    .side-controls label:hover{
        opacity: 1;
    }

    #slide7:checked ~ .side-controls label:nth-of-type(2),
    #slide2:checked ~ .side-controls label:nth-of-type(1), 
    #slide3:checked ~ .side-controls label:nth-of-type(2), 
    #slide4:checked ~ .side-controls label:nth-of-type(3), 
    #slide5:checked ~ .side-controls label:nth-of-type(4), 
    #slide6:checked ~ .side-controls label:nth-of-type(5),
    #slide7:checked ~ .side-controls label:nth-of-type(6),
    #slide1:checked ~ .side-controls label:nth-of-type(6){
        left: 0;
        background: url("images/left.png") ;
    }
    #slide1:checked ~ .side-controls label:nth-of-type(2), 
    #slide2:checked ~ .side-controls label:nth-of-type(3), 
    #slide3:checked ~ .side-controls label:nth-of-type(4), 
    #slide4:checked ~ .side-controls label:nth-of-type(5), 
    #slide5:checked ~ .side-controls label:nth-of-type(6), 
    #slide6:checked ~ .side-controls label:nth-of-type(7),
    #slide6:checked ~ .side-controls label:nth-of-type(1),
    #slide7:checked ~ .side-controls label:nth-of-type(2){
        right: 0;
        background: url("images/right.png");
    }
</style>

渲染结果如下

gif原图太大，上传不能超过5M，所以压缩了画质请忽略

无缝轮播label和input按钮我不怎么懂样式如此设置，过渡时间只能设置很短，不然不是无缝效果，关键是我不知道怎么设置input选中后的左边的按钮样式

也就是下面的样式该如何设置啊，主要是为了无缝轮播不然就知道，一旦加上最后一张和第一张相同的图片就糊了不知道该如何对应了

#slide7:checked ~ .side-controls label:nth-of-type(2),
#slide2:checked ~ .side-controls label:nth-of-type(1), 
#slide3:checked ~ .side-controls label:nth-of-type(2), 
#slide4:checked ~ .side-controls label:nth-of-type(3), 
#slide5:checked ~ .side-controls label:nth-of-type(4), 
#slide6:checked ~ .side-controls label:nth-of-type(5),
#slide7:checked ~ .side-controls label:nth-of-type(6),
#slide1:checked ~ .side-controls label:nth-of-type(6){
    left: 0;
    background: url("images/left.png") ;
}
#slide1:checked ~ .side-controls label:nth-of-type(2), 
#slide2:checked ~ .side-controls label:nth-of-type(3), 
#slide3:checked ~ .side-controls label:nth-of-type(4), 
#slide4:checked ~ .side-controls label:nth-of-type(5), 
#slide5:checked ~ .side-controls label:nth-of-type(6), 
#slide6:checked ~ .side-controls label:nth-of-type(7),
#slide6:checked ~ .side-controls label:nth-of-type(1),
#slide7:checked ~ .side-controls label:nth-of-type(2){
    right: 0;
    background: url("images/right.png");
}

Answer 1

我改变HTML结构，不再添加同第一张图片到末尾，同样去掉最后input和label，发现过渡时间短也能起到无缝轮播效果

.test:hover #slide1:checked ~ .side-controls label:nth-of-type(6), 
.test:hover #slide2:checked ~ .side-controls label:nth-of-type(1), 
.test:hover #slide3:checked ~ .side-controls label:nth-of-type(2), 
.test:hover #slide4:checked ~ .side-controls label:nth-of-type(3), 
.test:hover #slide5:checked ~ .side-controls label:nth-of-type(4), 
.test:hover #slide6:checked ~ .side-controls label:nth-of-type(5) {
    left: 0;
    background: url("images/left.png");
}
.test:hover #slide1:checked ~ .side-controls label:nth-of-type(2), 
.test:hover #slide2:checked ~ .side-controls label:nth-of-type(3), 
.test:hover #slide3:checked ~ .side-controls label:nth-of-type(4), 
.test:hover #slide4:checked ~ .side-controls label:nth-of-type(5), 
.test:hover #slide5:checked ~ .side-controls label:nth-of-type(6), 
.test:hover #slide6:checked ~ .side-controls label:nth-of-type(1) {
    right: 0;
    background: url("images/right.png");
}

gif一压缩，小龙女的嘴唇都变色了...