Question

如果我向滑块添加超过5张图片，则会叠加 2张照片显示在同一张幻灯片上我做错了什么？

5张图片 （Codepen）

.cc-slider {
  text-align: center;
  margin: 0 auto;
  max-width: 600px;
  position: relative;
}

.cc-slider input {
  display: none;
}

.cc-slider label,
a {
  color: #ef023f;
  cursor: pointer;
  text-decoration: none;
}

.cc-slider label:hover {
  color: #ff0042 !important;
}

.cc-slider .overflow {
  width: 100%;
  overflow: hidden;
}

.cc-slides article img {
  width: 100%;
}

.cc-slides .inner {
  width: 500%;
  line-height: 0;
}

.cc-slides article {
  width: 20%;
  float: left;
}

.cc-slider .controls {
  bottom: 15px;
  height: 50px;
  position: absolute;
  right: 15px;
  width: 120px;
}

.cc-slider .controls label {
  display: none;
  width: 50px;
  height: 50px;
}

.cc-slider .controls label:hover {
  opacity: 0.8;
}


/* cc-slider Styling */

.cc-slider .cc-slides {
  margin: 45px 0 0;
  padding: 0;
  background: #fff;
}


/* Animation */

.cc-slider .cc-slides .inner {
  -webkit-transform: translateZ(0);
  -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  /* easeInOutQuart */
  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  /* easeInOutQuart */
}

.cc-slider {
  -webkit-transform: translateZ(0);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.cc-slider .controls label {
  -webkit-transform: translateZ(0);
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
}


/* DO NOT EDIT */


/* slide 1 */

#slide1-1:checked~.cc-slides .inner {
  margin-left: 0;
}

#slide1-2:checked~.cc-slides .inner {
  margin-left: -100%;
}

#slide1-3:checked~.cc-slides .inner {
  margin-left: -200%;
}

#slide1-4:checked~.cc-slides .inner {
  margin-left: -300%;
}

#slide1-5:checked~.cc-slides .inner {
  margin-left: -400%;
}

#slide1-6:checked~.cc-slides .inner {
  margin-left: -500%;
}

#slide1-7:checked~.cc-slides .inner {
  margin-left: -600%;
}

#slide1-8:checked~.cc-slides .inner {
  margin-left: -700%;
}

#slide1-9:checked~.cc-slides .inner {
  margin-left: -800%;
}

#slide1-10:checked~.cc-slides .inner {
  margin-left: -900%;
}

#slide1-1:checked~.controls label:nth-child(2),
#slide1-2:checked~.controls label:nth-child(3),
#slide1-3:checked~.controls label:nth-child(4),
#slide1-4:checked~.controls label:nth-child(5),
#slide1-5:checked~.controls label:nth-child(6),
#slide1-6:checked~.controls label:nth-child(7),
#slide1-7:checked~.controls label:nth-child(8),
#slide1-8:checked~.controls label:nth-child(9),
#slide1-9:checked~.controls label:nth-child(10),
#slide1-10:checked~.controls label:nth-child(1) {
  background: url('../images/next.png') no-repeat;
  float: right;
  margin: 0 0 0 0;
  display: block;
  background-color: #ef023f;
}

#slide1-1:checked~.controls label:nth-child(10),
#slide1-2:checked~.controls label:nth-child(1),
#slide1-3:checked~.controls label:nth-child(2),
#slide1-4:checked~.controls label:nth-child(3),
#slide1-5:checked~.controls label:nth-child(4),
#slide1-6:checked~.controls label:nth-child(5) #slide1-7:checked~.controls label:nth-child(6) #slide1-8:checked~.controls label:nth-child(7) #slide1-9:checked~.controls label:nth-child(8) #slide1-10:checked~.controls label:nth-child(9) {
  background: url('../images/prev.png') no-repeat;
  float: left;
  margin: 0 0 0 0;
  display: block;
  background-color: #ef023f;
}

<article class="cc-slider">
  <input checked="checked" name="cc-slider1-1" id="slide1-1" type="radio">
  <input name="cc-slider1-1" id="slide1-2" type="radio">
  <input name="cc-slider1-1" id="slide1-3" type="radio">
  <input name="cc-slider1-1" id="slide1-4" type="radio">
  <input name="cc-slider1-1" id="slide1-5" type="radio">
  <input name="cc-slider1-1" id="slide1-6" type="radio">
  <input name="cc-slider1-1" id="slide1-7" type="radio">
  <input name="cc-slider1-1" id="slide1-8" type="radio">
  <input name="cc-slider1-1" id="slide1-9" type="radio">
  <input name="cc-slider1-1" id="slide1-10" type="radio">
  <div class="cc-slides">
    <div class="overflow">
      <div class="inner">
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-389_Beispiel.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-389_det_1.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-389_det_3.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-389_det_4.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-389x2_Variation_1.jpg"></article>
      </div>
    </div>
  </div>
  <div class="controls">
    <label for="slide1-1"></label>
    <label for="slide1-2"></label>
    <label for="slide1-3"></label>
    <label for="slide1-4"></label>
    <label for="slide1-5"></label>
    <label for="slide1-6"></label>
    <label for="slide1-7"></label>
    <label for="slide1-8"></label>
    <label for="slide1-9"></label>
    <label for="slide1-10"></label>
  </div>
</article>

10张图片（Codepen）

.cc-slider {
  text-align: center;
  margin: 0 auto;
  max-width: 600px;
  position: relative;
}

.cc-slider input {
  display: none;
}

.cc-slider label,
a {
  color: #ef023f;
  cursor: pointer;
  text-decoration: none;
}

.cc-slider label:hover {
  color: #ff0042 !important;
}

.cc-slider .overflow {
  width: 100%;
  overflow: hidden;
}

.cc-slides article img {
  width: 100%;
}

.cc-slides .inner {
  width: 500%;
  line-height: 0;
}

.cc-slides article {
  width: 20%;
  float: left;
}

.cc-slider .controls {
  bottom: 15px;
  height: 50px;
  position: absolute;
  right: 15px;
  width: 120px;
}

.cc-slider .controls label {
  display: none;
  width: 50px;
  height: 50px;
}

.cc-slider .controls label:hover {
  opacity: 0.8;
}


/* cc-slider Styling */

.cc-slider .cc-slides {
  margin: 45px 0 0;
  padding: 0;
  background: #fff;
}


/* Animation */

.cc-slider .cc-slides .inner {
  -webkit-transform: translateZ(0);
  -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  /* easeInOutQuart */
  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  /* easeInOutQuart */
}

.cc-slider {
  -webkit-transform: translateZ(0);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.cc-slider .controls label {
  -webkit-transform: translateZ(0);
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
}


/* DO NOT EDIT */


/* slide 1 */

#slide1-1:checked~.cc-slides .inner {
  margin-left: 0;
}

#slide1-2:checked~.cc-slides .inner {
  margin-left: -100%;
}

#slide1-3:checked~.cc-slides .inner {
  margin-left: -200%;
}

#slide1-4:checked~.cc-slides .inner {
  margin-left: -300%;
}

#slide1-5:checked~.cc-slides .inner {
  margin-left: -400%;
}

#slide1-6:checked~.cc-slides .inner {
  margin-left: -500%;
}

#slide1-7:checked~.cc-slides .inner {
  margin-left: -600%;
}

#slide1-8:checked~.cc-slides .inner {
  margin-left: -700%;
}

#slide1-9:checked~.cc-slides .inner {
  margin-left: -800%;
}

#slide1-10:checked~.cc-slides .inner {
  margin-left: -900%;
}

#slide1-1:checked~.controls label:nth-child(2),
#slide1-2:checked~.controls label:nth-child(3),
#slide1-3:checked~.controls label:nth-child(4),
#slide1-4:checked~.controls label:nth-child(5),
#slide1-5:checked~.controls label:nth-child(6),
#slide1-6:checked~.controls label:nth-child(7),
#slide1-7:checked~.controls label:nth-child(8),
#slide1-8:checked~.controls label:nth-child(9),
#slide1-9:checked~.controls label:nth-child(10),
#slide1-10:checked~.controls label:nth-child(1) {
  background: url('../images/next.png') no-repeat;
  float: right;
  margin: 0 0 0 0;
  display: block;
  background-color: #ef023f;
}

#slide1-1:checked~.controls label:nth-child(10),
#slide1-2:checked~.controls label:nth-child(1),
#slide1-3:checked~.controls label:nth-child(2),
#slide1-4:checked~.controls label:nth-child(3),
#slide1-5:checked~.controls label:nth-child(4),
#slide1-6:checked~.controls label:nth-child(5) #slide1-7:checked~.controls label:nth-child(6) #slide1-8:checked~.controls label:nth-child(7) #slide1-9:checked~.controls label:nth-child(8) #slide1-10:checked~.controls label:nth-child(9) {
  background: url('../images/prev.png') no-repeat;
  float: left;
  margin: 0 0 0 0;
  display: block;
  background-color: #ef023f;
}

<article class="cc-slider">
  <input checked="checked" name="cc-slider1-1" id="slide1-1" type="radio">
  <input name="cc-slider1-1" id="slide1-2" type="radio">
  <input name="cc-slider1-1" id="slide1-3" type="radio">
  <input name="cc-slider1-1" id="slide1-4" type="radio">
  <input name="cc-slider1-1" id="slide1-5" type="radio">
  <input name="cc-slider1-1" id="slide1-6" type="radio">
  <input name="cc-slider1-1" id="slide1-7" type="radio">
  <input name="cc-slider1-1" id="slide1-8" type="radio">
  <input name="cc-slider1-1" id="slide1-9" type="radio">
  <input name="cc-slider1-1" id="slide1-10" type="radio">
  <div class="cc-slides">
    <div class="overflow">
      <div class="inner">
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-389_Beispiel.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-389_det_1.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-389_det_3.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-389_det_4.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-389x2_Variation_1.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-365-366-367-368_Beispiel_1.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-365-366-367-368_Beispiel_2.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-365-366-367-368_Variation_1.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-365-366-367-368_Variation_2.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-365-366-367-368_Variation_3.jpg"></article>
      </div>
    </div>
  </div>
  <div class="controls">
    <label for="slide1-1"></label>
    <label for="slide1-2"></label>
    <label for="slide1-3"></label>
    <label for="slide1-4"></label>
    <label for="slide1-5"></label>
    <label for="slide1-6"></label>
    <label for="slide1-7"></label>
    <label for="slide1-8"></label>
    <label for="slide1-9"></label>
    <label for="slide1-10"></label>
  </div>
</article>

Answer 1

相当酷的CSS滑块！

它似乎被设计为5张图片而不是10张我做了以下三个调整：

滑块的内部宽度设置为500％，或5个宽度我将其更改为1000％以容纳10个项目：
```
.cc-slides .inner {
    width: 1000%;
```
物品宽度设定为父母宽度的20％或¹ / ₅。
因此，在5个项目之后，文章行将换行到下一行我将其更改为父宽度的10％或¹ / ₁₀：
```
.cc-slides article {
    width: 10%;
```

在几个CSS选择器之后，逗号丢失了，所以我添加了它们：

#slide1-6:checked ~ .controls label:nth-child(5),
#slide1-7:checked ~ .controls label:nth-child(6),
#slide1-8:checked ~ .controls label:nth-child(7),
#slide1-9:checked ~ .controls label:nth-child(8),
#slide1-10:checked ~ .controls label:nth-child(9) {

我还将整个滑块设置得更小，只是因为它适合SO的片段窗口工作示例，如下：

.cc-slider {
  text-align: center;
  margin: 0 auto;
  max-width: 200px;/*600px;*/
  position: relative;
}

.cc-slider input {
  display: none;
}

.cc-slider label,
a {
  color: #ef023f;
  cursor: pointer;
  text-decoration: none;
}

.cc-slider label:hover {
  color: #ff0042 !important;
}

.cc-slider .overflow {
  width: 100%;
  overflow: hidden;
}

.cc-slides article img {
  width: 100%;
}

.cc-slides .inner {
  width: 1000%; /*500%*/
  line-height: 0;
}

.cc-slides article {
  width: 10%; /*20%*/
  float: left;
}

.cc-slider .controls {
  bottom: 15px;
  height: 50px;
  position: absolute;
  right: 15px;
  width: 120px;
}

.cc-slider .controls label {
  display: none;
  width: 50px;
  height: 50px;
}

.cc-slider .controls label:hover {
  opacity: 0.8;
}


/* cc-slider Styling */

.cc-slider .cc-slides {
  /*margin: 45px 0 0;*/
  padding: 0;
  background: #fff;
}


/* Animation */

.cc-slider .cc-slides .inner {
  -webkit-transform: translateZ(0);
  -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  /* easeInOutQuart */
  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
  /* easeInOutQuart */
}

.cc-slider {
  -webkit-transform: translateZ(0);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

.cc-slider .controls label {
  -webkit-transform: translateZ(0);
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
}


/* DO NOT EDIT */


/* slide 1 */

#slide1-1:checked~.cc-slides .inner {
  margin-left: 0;
}

#slide1-2:checked~.cc-slides .inner {
  margin-left: -100%;
}

#slide1-3:checked~.cc-slides .inner {
  margin-left: -200%;
}

#slide1-4:checked~.cc-slides .inner {
  margin-left: -300%;
}

#slide1-5:checked~.cc-slides .inner {
  margin-left: -400%;
}

#slide1-6:checked~.cc-slides .inner {
  margin-left: -500%;
}

#slide1-7:checked~.cc-slides .inner {
  margin-left: -600%;
}

#slide1-8:checked~.cc-slides .inner {
  margin-left: -700%;
}

#slide1-9:checked~.cc-slides .inner {
  margin-left: -800%;
}

#slide1-10:checked~.cc-slides .inner {
  margin-left: -900%;
}

#slide1-1:checked~.controls label:nth-child(2),
#slide1-2:checked~.controls label:nth-child(3),
#slide1-3:checked~.controls label:nth-child(4),
#slide1-4:checked~.controls label:nth-child(5),
#slide1-5:checked~.controls label:nth-child(6),
#slide1-6:checked~.controls label:nth-child(7),
#slide1-7:checked~.controls label:nth-child(8),
#slide1-8:checked~.controls label:nth-child(9),
#slide1-9:checked~.controls label:nth-child(10),
#slide1-10:checked~.controls label:nth-child(1) {
  background: url('../images/next.png') no-repeat;
  float: right;
  margin: 0 0 0 0;
  display: block;
  background-color: #ef023f;
}

#slide1-1:checked~.controls label:nth-child(10),
#slide1-2:checked~.controls label:nth-child(1),
#slide1-3:checked~.controls label:nth-child(2),
#slide1-4:checked~.controls label:nth-child(3),
#slide1-5:checked~.controls label:nth-child(4),
#slide1-6:checked~.controls label:nth-child(5),
#slide1-7:checked~.controls label:nth-child(6),
#slide1-8:checked~.controls label:nth-child(7),
#slide1-9:checked~.controls label:nth-child(8),
#slide1-10:checked~.controls label:nth-child(9) {
  background: url('../images/prev.png') no-repeat;
  float: left;
  margin: 0 0 0 0;
  display: block;
  background-color: #ef023f;
}

<article class="cc-slider">
  <input checked="checked" name="cc-slider1-1" id="slide1-1" type="radio">
  <input name="cc-slider1-1" id="slide1-2" type="radio">
  <input name="cc-slider1-1" id="slide1-3" type="radio">
  <input name="cc-slider1-1" id="slide1-4" type="radio">
  <input name="cc-slider1-1" id="slide1-5" type="radio">
  <input name="cc-slider1-1" id="slide1-6" type="radio">
  <input name="cc-slider1-1" id="slide1-7" type="radio">
  <input name="cc-slider1-1" id="slide1-8" type="radio">
  <input name="cc-slider1-1" id="slide1-9" type="radio">
  <input name="cc-slider1-1" id="slide1-10" type="radio">
  <div class="cc-slides">
    <div class="overflow">
      <div class="inner">
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-389_Beispiel.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-389_det_1.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-389_det_3.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-389_det_4.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-389x2_Variation_1.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-365-366-367-368_Beispiel_1.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-365-366-367-368_Beispiel_2.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-365-366-367-368_Variation_1.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-365-366-367-368_Variation_2.jpg"></article>
        <article><img src="http://media.ecd-parts.de/Artikelbilder/Original/IP-365-366-367-368_Variation_3.jpg"></article>
      </div>
    </div>
  </div>
  <div class="controls">
    <label for="slide1-1"></label>
    <label for="slide1-2"></label>
    <label for="slide1-3"></label>
    <label for="slide1-4"></label>
    <label for="slide1-5"></label>
    <label for="slide1-6"></label>
    <label for="slide1-7"></label>
    <label for="slide1-8"></label>
    <label for="slide1-9"></label>
    <label for="slide1-10"></label>
  </div>
</article>

纯CSS滑块故障

1 个答案: