html - 纯 CSS 幻灯片单选按钮(第四个按钮作为第一个？)

Question

我的幻灯片放映似乎有问题，第 4 个按钮无法正确操作，

这是 JSFiddle:

https://jsfiddle.net/14yme7va/1/

单击图像下方的单选按钮可在图像之间切换。

单击第二个 - 有效。

第三 - 有效。

单击第四个单选按钮...它转到第一个。

点击第五个...有效。

我已经仔细查看了很多次，一切似乎都是正确的。显然我遗漏了一些东西。

为什么第四个单选按钮会滑到第一张图片，我该如何让它像所有其他单选按钮一样正确过渡？

HTML:

<div class="containbox">
   <div class="leftbox">
   </div>
   <div class="rightbox">
      <div class="sp-slideshow">
         <input checked="checked" class="sp-selector-1" id="button-1" name="radio-set" type="radio">
         <input class="sp-selector-2" id="button-2" name="radio-set" type="radio">
         <input class="sp-selector-3" id="button-3" name="radio-set" type="radio">
         <input class="sp-selector-4" id="button-4" name="radio-set" type="radio">
         <input class="sp-selector-5" id="button-5" name="radio-set" type="radio">
         <div class="sp-content">
            <div class="sp-parallax-bg"></div>
            <ul class="sp-slider clearfix">
               <li><img alt="image01" src="https://via.placeholder.com/370"></li>
               <li><img alt="image02" src="https://via.placeholder.com/370"></li>
               <li><img alt="image03" src="https://via.placeholder.com/370"></li>
               <li><img alt="image04" src="https://via.placeholder.com/370"></li>
               <li><img alt="image05" src="https://via.placeholder.com/370"></li>
            </ul>
         </div>
      </div>
   </div>
</div>

CSS:

.sp-slideshow {
    position: relative;
    margin: 4em 6rem 4em 4rem;
    padding: 0em 0em 0em 0em;
    height: 460px;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.82);
}


.sp-content {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at top, rgba(48, 60, 62, 0.67), rgba(0, 0, 0, 0.59), rgba(0, 0, 0, 0.73), rgba(0, 0, 0, 0.66));
    background-size: cover;
    overflow: hidden;
}

.sp-content::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to bottom right, #202020, #202020);
    opacity: .6;
}

.sp-parallax-bg {
    background: #2e2b2a40 repeat-x scroll 0 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sp-slideshow input {
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 9px;
    height: 9px;
    z-index: 1001;
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 1;
}

.sp-slideshow input+label {
    position: absolute;
    bottom: 15px;
    width: 10px;
    height: 10px;
    display: block;
    z-index: 1000;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    -ms-transition: all 0.1s linear;
    transition: all 0.1s linear;
}


.sp-slideshow input:checked~.sp-content {
    -webkit-transition: background-position linear 0.6s, background-color linear 0.8s;
    -moz-transition: background-position linear 0.6s, background-color linear 0.8s;
    -o-transition: background-position linear 0.6s, background-color linear 0.8s;
    -ms-transition: background-position linear 0.6s, background-color linear 0.8s;
    transition: background-position linear 0.6s, background-color linear 0.8s;
}

.sp-slideshow input:checked~.sp-content .sp-parallax-bg {
    -webkit-transition: background-position linear 0.7s;
    -moz-transition: background-position linear 0.7s;
    -o-transition: background-position linear 0.7s;
    -ms-transition: background-position linear 0.7s;
    transition: background-position linear 0.7s;
}

.sp-selector-1,
.button-label-1 {
    margin-left: -36px;
}

.sp-selector-2,
.button-label-2 {
    margin-left: -18px;
}

.sp-selector-3,
.button-label-3 {
    margin-left: 0px;
}

.sp-selector-4,
.button-label-4 {
    margin-left: 18px;
}

.sp-selector-5,
.button-label-5 {
    margin-left: 36px;
}

.sp-selector-6,
.button-label-6 {
    margin-left: 54px;
}

.sp-selector-7,
.button-label-7 {
    margin-left: 72px;
}

.sp-selector-1:checked~.sp-arrow.sp-a2,
.sp-selector-2:checked~.sp-arrow.sp-a3,
.sp-selector-3:checked~.sp-arrow.sp-a4,
.sp-selector-4:checked~.sp-arrow.sp-a5,
.sp-selector-5:checked~.sp-arrow.sp-a6,
.sp-selector-6:checked~.sp-arrow.sp-a7 {
    right: 15px;
    display: block;
    background-position: top right;
}

.sp-selector-2:checked~.sp-arrow.sp-a1,
.sp-selector-3:checked~.sp-arrow.sp-a2,
.sp-selector-4:checked~.sp-arrow.sp-a3,
.sp-selector-5:checked~.sp-arrow.sp-a4,
.sp-selector-6:checked~.sp-arrow.sp-a5,
.sp-selector-7:checked~.sp-arrow.sp-a6 {
    left: 15px;
    display: block;
    background-position: top left;
}

input.sp-selector-1:checked~.sp-content .sp-parallax-bg {
    background-position: 0 0;
}

input.sp-selector-2:checked~.sp-content .sp-parallax-bg {
    background-position: -200px 0;
}

input.sp-selector-3:checked~.sp-content .sp-parallax-bg {
    background-position: -400px 0;
}

input.sp-selector-4:checked~.sp-content .sp-parallax-bg {
    background-position: -600px 0;
}

input.sp-selector-5:checked~.sp-content .sp-parallax-bg {
    background-position: -800px 0;
}

input.sp-selector-6:checked~.sp-content .sp-parallax-bg {
    background-position: -1000px 0;
}

input.sp-selector-7:checked~.sp-content .sp-parallax-bg {
    background-position: -1200px 0;
}

input.sp-selector-1:checked~.sp-content .sp-slider {
    left: 0;
}


input.sp-selector-2:checked~.sp-content .sp-slider {
    left: -100%;
}

input.sp-selector-3:checked~.sp-content .sp-slider {
    left: -200%;
}

input.sp-selector-4:checked~.sp-content .sp-slider ~  {
    left: -300%;
}

input.sp-selector-5:checked~.sp-content .sp-slider {
    left: -400%;
}

input.sp-selector-6:checked~.sp-content .sp-slider {
    left: -500%;
}

input.sp-selector-7:checked~.sp-content .sp-slider {
    left: -600%;
}

input.sp-selector-1:checked~.sp-content .sp-slider>li:first-child,
input.sp-selector-2:checked~.sp-content .sp-slider>li:nth-child(2),
input.sp-selector-3:checked~.sp-content .sp-slider>li:nth-child(3),
input.sp-selector-4:checked~.sp-content .sp-slider>li:nth-child(4),
input.sp-selector-5:checked~.sp-content .sp-slider>li:nth-child(5),
input.sp-selector-6:checked~.sp-content .sp-slider>li:nth-child(6),
input.sp-selector-7:checked~.sp-content .sp-slider>li:nth-child(7) {
    opacity: 1;
}
.containbox{display:table;width:100%; height:100%;}

.rightbox {
    display:table-cell;
    vertical-align:middle; width:75%; text-align:center; }

.leftbox {
    display:table-cell;
    vertical-align:middle; width:25%; text-align:center; }

    .thumbnailimage {
    padding: 0rem 1rem 1rem 0rem;

}


.sp-slider {
    position: relative;
    left: 0;
    width: 700%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-transition: left ease-in 0.8s;
    -moz-transition: left ease-in 0.8s;
    -o-transition: left ease-in 0.8s;
    -ms-transition: left ease-in 0.8s;
    transition: left ease-in 0.8s;
}

.sp-slider>li {
    color: #fff;
    width: 14.28%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    padding: 0px 0px 0px 0.8%;
    float: left;
    text-align: center;
    opacity: 0.9;
    -webkit-transition: opacity ease-in 0.4s 0.8s;
    -moz-transition: opacity ease-in 0.4s 0.8s;
    -o-transition: opacity ease-in 0.4s 0.8s;
    -ms-transition: opacity ease-in 0.4s 0.8s;
    transition: opacity ease-in 0.4s 0.8s;
}

.sp-slider>li img {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    padding: 40px 0 50px 0;
    max-height: 100%;
    max-width: 100%;
}

Answer 1

第 187 行更改您的 css

input.sp-selector-4:checked~.sp-content .sp-slider ~  {
    left: -300%;
}

到:

input.sp-selector-4:checked~.sp-content .sp-slider  {
    left: -300%;
}

还有一个~