Pure CSS slider with autoplay

index.html

<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="play1" 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>
    </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>
      
        <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>
        </div>
    </div>
</div>

pure-css-slider-with-autoplay.markdown

Pure CSS slider with autoplay

A Pen by Míriam Castellón on CodePen.

License.

style.css

.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%;
}




/* 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) {
  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) {
  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;	
}
/* 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;	
}
/* Calculate AUTOPLAY for CAPTION - END */

How does one have to adapt the parameters for more than 3 slides?

How does one have to adapt the parameters for more than 3 slides? please help :( need this

Sorry for the late answer, I didn't see your comment.
It would be possible to add other slides by amending the code:

• in index.html duplicate lines of slides (such as for example

<div class="image-slide">
         <div class="image bg-red" style="background-color:orange;">image slide 3</div>
       </div>

and other similar lines

• in css file add also animation for additional slides and recalculate the animation margin and timing such as for example

#play1:checked ~ .labels .label:nth-child(3) {
 animation: caption 12300ms infinite 7200ms;	
} and other similar code lines

and other similar lines

As I am not skilled enough to provide you with specific guidances, please make some tests and various tentatives