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

Question

This is my code, when i run it with 5 images it works fine. Now when i add a 6th images it doesnt work anymore. It is somehow showing the images in the 1st slide or with bigger images on the 5th slide. Tried many things can't figure it out. I thougth it was the float but that isn't it so i don't know anymore. The arrows arrent showing up so i used white boxes :).

This is my css and 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 images should make container 600%

6 image should be 16.66% each of the container

.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>