为什么我不能在纯 css 幻灯片放映中添加新幻灯片？

Question

这是我的代码，当我运行它有 5 张图片时它工作正常。现在，当我添加第 6 张图片时，它不再起作用了。它以某种方式在第 1 张幻灯片中显示图像或在第 5 张幻灯片中显示更大的图像。试了很多东西都弄不明白。我以为那是花车，但事实并非如此，所以我不知道了。箭头没有出现，所以我使用了白框 :)。

这是我的 css 和 html：

.sp-slideshow {
    position: relative;
    margin: 10px auto;
    width: 65%;
    max-width: 1000px;
    min-width: 260px;
    height: 60%;
    border: 10px solid #fff;
    border: 10px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.sp-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.sp-slideshow input {
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 9px;
    height: 9px;
    z-index: 1001;
    cursor: pointer;
    opacity: 0;
}

.sp-slideshow input+label {
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 6px;
    height: 6px;
    display: block;
    z-index: 1000;
    border: 3px solid #fff;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transition: background-color linear 0.1s;
}

.sp-slideshow input:checked+label {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.9);
}

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

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

.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-arrow {
    position: absolute;
    top: 50%;
    width: 28px;
    height: 38px;
    margin-top: -19px;
    display: none;
    
    cursor: pointer;
    z-index: 1000;
    background: transparent url(arrows.png) no-repeat;
    background-color:white;
    transition: opacity linear 0.3s;
}

.sp-arrow:hover {
    opacity: 1;
}

.sp-arrow:active {
    margin-top: -18px;
}

.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 {
    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 {
    left: 15px;
    display: block;
    background-position: top left;
}

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

input.sp-selector-2:checked~.sp-content {
    background-position: -100px 0;
    background-color: lightcoral;
}

input.sp-selector-3:checked~.sp-content {
    background-position: -200px 0;
    background-color: lightgoldenrodyellow;
}

input.sp-selector-4:checked~.sp-content {
    background-position: -300px 0;
    background-color: lightgreen;
}

input.sp-selector-5:checked~.sp-content {
    background-position: -400px 0;
    background-color: lightpink;
}

input.sp-selector-6:checked~.sp-content {
    background-position: -500px 0;
    background-color: red;
}

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

.sp-slider>li {
    color: #fff;
    width: 20%;
    box-sizing: border-box;
    float: left;
    text-align: center;
    position: relative;
}

.sp-slider>li img {
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}

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-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) {
    opacity: 1;
}

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="ImageHomePage.css">
 <title>Document</title>
</head>

<body>
 <p>Hoi</p>
 <div class="sp-slideshow">

  <input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
  <label for="button-1" class="button-label-1"></label>

  <input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />
  <label for="button-2" class="button-label-2"></label>

  <input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />
  <label for="button-3" class="button-label-3"></label>

  <input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />
  <label for="button-4" class="button-label-4"></label>
  
  <input id="button-5" type="radio" name="radio-set" class="sp-selector-5" />
  <label for="button-5" class="button-label-5"></label>

  <input id="button-6" type="radio" name="radio-set" class="sp-selector-6" />
  <label for="button-6" class="button-label-6"></label>




  <label for="button-1" class="sp-arrow sp-a1"></label>
  <label for="button-2" class="sp-arrow sp-a2"></label>
  <label for="button-3" class="sp-arrow sp-a3"></label>
  <label for="button-4" class="sp-arrow sp-a4"></label>
  <label for="button-5" class="sp-arrow sp-a5"></label>
  <label for="button-6" class="sp-arrow sp-a6"></label>

  <div class="sp-content">
   <ul class="sp-slider clearfix">
    <li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image01" /></li>
    <li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image02" /></li>
    <li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image03" /></li>
    <li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image04" /></li>
    <li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image05" /></li>
        <li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image06"/></li>
    
   </ul>
  </div>
  <!-- sp-content -->

 </div>
 <!-- sp-slideshow -->

 </div>
</body>

</html>

Answer 1

6 个图像应占容器 600%

6 个图像应占每个容器的 16.66%

.sp-slider {
    position: relative;
    left: 0;
    width: 600%;/* ============  6 images of 100% width */
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: left ease-in 0.8s;
}

.sp-slider > li {
  color: #fff;
  width: 16.66%;/* =====!  X6 = 100% width of parent container */
  box-sizing: border-box;
  float: left;
  text-align: center;
  position: relative;
}

.sp-slideshow {
    position: relative;
    margin: 10px auto;
    width: 65%;
    max-width: 1000px;
    min-width: 260px;
    height: 60%;
    border: 10px solid #fff;
    border: 10px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.sp-content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.sp-slideshow input {
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 9px;
    height: 9px;
    z-index: 1001;
    cursor: pointer;
    opacity: 0;
}

.sp-slideshow input+label {
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 6px;
    height: 6px;
    display: block;
    z-index: 1000;
    border: 3px solid #fff;
    border: 3px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transition: background-color linear 0.1s;
}

.sp-slideshow input:checked+label {
    background-color: #fff;
    background-color: rgba(255, 255, 255, 0.9);
}

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

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

.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-arrow {
    position: absolute;
    top: 50%;
    width: 28px;
    height: 38px;
    margin-top: -19px;
    display: none;
    
    cursor: pointer;
    z-index: 1000;
    background: transparent url(arrows.png) no-repeat;
    background-color:white;
    transition: opacity linear 0.3s;
}

.sp-arrow:hover {
    opacity: 1;
}

.sp-arrow:active {
    margin-top: -18px;
}

.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 {
    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 {
    left: 15px;
    display: block;
    background-position: top left;
}

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

input.sp-selector-2:checked~.sp-content {
    background-position: -100px 0;
    background-color: lightcoral;
}

input.sp-selector-3:checked~.sp-content {
    background-position: -200px 0;
    background-color: lightgoldenrodyellow;
}

input.sp-selector-4:checked~.sp-content {
    background-position: -300px 0;
    background-color: lightgreen;
}

input.sp-selector-5:checked~.sp-content {
    background-position: -400px 0;
    background-color: lightpink;
}

input.sp-selector-6:checked~.sp-content {
    background-position: -500px 0;
    background-color: red;
}

.sp-slider {
    position: relative;
    left: 0;
    width: 600%;/* ============  6 images of 100% width */
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: left ease-in 0.8s;
}

.sp-slider > li {
  color: #fff;
  width: 16.66%;/* =====!  X6 = 100% width of parent container */
  box-sizing: border-box;
  float: left;
  text-align: center;
  position: relative;
}

.sp-slider>li img {
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    max-height: 100%;
    max-width: 100%;
}

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-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(5) {
    opacity: 1;
}

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="ImageHomePage.css">
 <title>Document</title>
</head>

<body>
 <p>Hoi</p>
 <div class="sp-slideshow">

  <input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
  <label for="button-1" class="button-label-1"></label>

  <input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />
  <label for="button-2" class="button-label-2"></label>

  <input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />
  <label for="button-3" class="button-label-3"></label>

  <input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />
  <label for="button-4" class="button-label-4"></label>
  
  <input id="button-5" type="radio" name="radio-set" class="sp-selector-5" />
  <label for="button-5" class="button-label-5"></label>

  <input id="button-6" type="radio" name="radio-set" class="sp-selector-6" />
  <label for="button-6" class="button-label-6"></label>




  <label for="button-1" class="sp-arrow sp-a1"></label>
  <label for="button-2" class="sp-arrow sp-a2"></label>
  <label for="button-3" class="sp-arrow sp-a3"></label>
  <label for="button-4" class="sp-arrow sp-a4"></label>
  <label for="button-5" class="sp-arrow sp-a5"></label>
  <label for="button-6" class="sp-arrow sp-a6"></label>

  <div class="sp-content">
   <ul class="sp-slider clearfix">
    <li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image01" /></li>
    <li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image02" /></li>
    <li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image03" /></li>
    <li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image04" /></li>
    <li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image05" /></li>
        <li><img src="http://www.mulierchile.com/random-image/random-image-013.jpg" alt="image06"/></li>
    
   </ul>
  </div>
  <!-- sp-content -->

 </div>
 <!-- sp-slideshow -->

 </div>
</body>

</html>

为什么我不能在纯 css 幻灯片放映中添加新幻灯片？

Why can't i add a new slide to my pure css slideshow?

html

css

slideshow