CSS滑块与自动播放超过3个幻灯片

Question

我想给这个滑动条添加另一个幻灯片:

codepen.io/miriamcc/钢笔/KzGGqZ

但我不知道如何计算CSS中的所有设置，也许有人有类似的滑块没有JS或知道如何增加幻灯片数?

@EDIT

我自己修复了它:codepen.io/m17ek/钢笔/LYQyzbo

Answer 1

给你:

用于将来添加另一张幻灯片时的计算:

复制这

/* add slide id here */
#slide4:checked ~ .images .images-inner {
/* increase this by 100% */
margin-left: -300%;
}
/* add nth child after comma(,) near Color of bullets */ 
/* add nth child after comma(,) near Text of slides */ 
/* add this and replace 4 with child count and increase time after infinite by 4100ms   */
#play1:checked ~ div .fake-radio .radio-btn:nth-child(4) {
animation: bullet 12300ms infinite 11300ms;   
}
/* do like above for this as well */
#play1:checked ~ .labels .label:nth-child(4) {
animation: caption 12300ms infinite 11300ms;  
}

.image {
width: 100%;
height: 200px;
}
.radio {
/*display: none;*/
}
.images {
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
}
.images-inner {
width: 500%;
transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
.image-slide {
width: 20%;
float: left;
}
.image-slide,
.fake-radio,
.radio-btn {
transition: all 0.5s ease-out;
}
.fake-radio {
float: right;
}


/* Move slides overflowed container */
#slide1:checked ~ .images .images-inner {
margin-left: 0;
}
#slide2:checked ~ .images .images-inner {
margin-left: -100%;
}
#slide3:checked ~ .images .images-inner {
margin-left: -200%;
}
#slide4:checked ~ .images .images-inner {
margin-left: -300%;
}


/* Color of bullets */
#slide1:checked ~ div .fake-radio .radio-btn:nth-child(1),
#slide2:checked ~ div .fake-radio .radio-btn:nth-child(2),
#slide3:checked ~ div .fake-radio .radio-btn:nth-child(3),
#slide3:checked ~ div .fake-radio .radio-btn:nth-child(4){
background: red;
}
.radio-btn {
width: 9px;
height: 9px;
border-radius: 5px;
background: gray;
display: inline-block !important;
margin: 0 1px;
cursor: pointer;
}
/* Color of bullets - END */


/* Text of slides */
#slide1:checked ~ .labels .label:nth-child(1),
#slide2:checked ~ .labels .label:nth-child(2),
#slide3:checked ~ .labels .label:nth-child(3),
#slide4:checked ~ .labels .label:nth-child(4){
opacity: 1;
}
.label {
opacity: 0;
position: absolute;
}
/* Text of slides - END */

/* Calculate AUTOPLAY for BULLETS */
@keyframes bullet {
0%, 33.32333333333334%    {
background: red;
}
33.333333333333336%, 100% {
background: gray;
}
}

#play1:checked ~ div .fake-radio .radio-btn:nth-child(1) {
animation: bullet 12300ms infinite -1000ms;
}
#play1:checked ~ div .fake-radio .radio-btn:nth-child(2) {
animation: bullet 12300ms infinite 3100ms;    
}
#play1:checked ~ div .fake-radio .radio-btn:nth-child(3) {
animation: bullet 12300ms infinite 7200ms;    
}
#play1:checked ~ div .fake-radio .radio-btn:nth-child(4) {
animation: bullet 12300ms infinite 11300ms;   
}
/* Calculate AUTOPLAY for BULLETS - END */


/* Calculate AUTOPLAY for SLIDES */
@keyframes slide {
0%, 25.203252032520325%   { margin-left: 0; }
33.333333333333336%, 58.53658536585366%   { margin-left: -100%; }
66.66666666666667%, 91.869918699187%  { margin-left: -200%; }
}

.st-slider > #play1:checked ~ .images .images-inner {
animation: slide 12300ms infinite;    
}
/* Calculate AUTOPLAY for SLIDES - END */


/* Calculate AUTOPLAY for CAPTION */
@keyframes caption {
0%, 33.32333333333334%    {
opacity: 1;
}
33.333333333333336%, 100% {
opacity: 0;
}
}

#play1:checked ~ .labels .label:nth-child(1) {
animation: caption 12300ms infinite -1000ms;
}
#play1:checked ~ .labels .label:nth-child(2) {
animation: caption 12300ms infinite 3100ms;   
}
#play1:checked ~ .labels .label:nth-child(3) {
animation: caption 12300ms infinite 7200ms;   
}
#play1:checked ~ .labels .label:nth-child(4) {
animation: caption 12300ms infinite 11300ms;  
}
/* Calculate AUTOPLAY for CAPTION - END */

<h1>Pure CSS slider</h1><pre>(with Autoplay at the beginning)</pre><br>
<div id="homepage-slider" class="st-slider">
<input type="radio" class="cs_anchor radio" name="slider" id="slide1"/>
<input type="radio" class="cs_anchor radio" name="slider" id="slide2"/>
<input type="radio" class="cs_anchor radio" name="slider" id="slide3"/>
<input type="radio" class="cs_anchor radio" name="slider" id="slide4" checked=""/>
<div class="images">
<div class="images-inner">
<div class="image-slide">
<div class="image bg-yellow" style="background-color:yellow;">image slide 1</div>
</div>
<div class="image-slide">
<div class="image bg-blue" style="background-color:pink;">imager slide 2</div>
</div>
<div class="image-slide">
<div class="image bg-red" style="background-color:orange;">image slide 3</div>
</div>
<div class="image-slide">
<div class="image bg-blue" style="background-color:lightblue;">image slide 4</div>
</div>
</div>
</div>

<div class="labels">
<label for="slide1" class="label">text slide 1</label>
<label for="slide2" class="label">text slide 2</label>
<label for="slide3" class="label">text slide 3</label>
<label for="slide4" class="label">text slide 4</label>
<div class="fake-radio">
<label for="slide1" class="radio-btn"></label>
<label for="slide2" class="radio-btn"></label>
<label for="slide3" class="radio-btn"></label>
<label for="slide4" class="radio-btn"></label>
</div>
</div>
</div>