html slider autoplay code example

Example 1: javascript autoplay slider

<section id="slider">
    <input type="radio" name="slider" id="s1">
    <input type="radio" name="slider" id="s2">
    <input type="radio" name="slider" id="s3" checked>
    <input type="radio" name="slider" id="s4">
    <input type="radio" name="slider" id="s5">
    <label for="s1" id="slide1">Slide 1</label>
    <label for="s2" id="slide2">Slide 2</label>
    <label for="s3" id="slide3">Slide 3</label>
    <label for="s4" id="slide4">Slide 4</label>
    <label for="s5" id="slide5">Slide 5</label>

Here's my CSS 

* {
}

body {
box-sizing: border-box;
margin: 0 auto;
}

input[type=radio] {
  display: none;
}

#slider {
  margin-top: 10px;
  height: 300px;
  width: auto;
  position: relative;
  perspective: 40rem;
  transform-style: preserve-3d;
}

#slider label {
  margin: auto;
  width: 40%;
  height: 400px;
  border-radius: 10px;
  position: absolute;
  left: 0; right: 0;
  cursor: pointer;
  transition: transform 0.9s ease;
}
/* far left*/
#s1:checked ~ #slide4, #s2:checked ~ #slide5,
#s3:checked ~ #slide1, #s4:checked ~ #slide2,
#s5:checked ~ #slide3 {
  box-shadow: 0 5px 8px 0 rgba(0,0,0,.37);
  transform: translate3d(-65%,0,-200px) rotateY(10deg);
}
/* left */
#s1:checked ~ #slide5, #s2:checked ~ #slide1,
#s3:checked ~ #slide2, #s4:checked ~ #slide3,
#s5:checked ~ #slide4 {
  box-shadow: 0 12px 15px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
  transform: translate3d(-25%,0,-100px) rotateY(10deg);
}
/* middle */
#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3, #s4:checked ~ #slide4,
#s5:checked ~ #slide5 {
  box-shadow: 0px 30px 80px -9px rgba(0,0,0,0.5), 0 11px 7px 0 rgba(0,0,0,.19);
  transform: translate3d(0,0,0);
}
/* right */
#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide4, #s4:checked ~ #slide5,
#s5:checked ~ #slide1 {
  box-shadow: 0 12px 15px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
  transform: translate3d(25%,0,-100px) rotateY(-10deg);
}
/* far right */
#s1:checked ~ #slide3, #s2:checked ~ #slide4,
#s3:checked ~ #slide5, #s4:checked ~ #slide1,
#s5:checked ~ #slide2 {
  box-shadow: 0 5px 8px 0 rgba(0,0,0,.37);
  transform: translate3d(65%,0,-200px) rotateY(-10deg);
}

/*slide content*/
#slide1 { background: #00bcd4 }
#slide2 { background: #4caf50 }
#slide3 { background: #6a4caf }
#slide4 { background: #ffc107 }
#slide5 { background: #ff5722 }

#slide1, #slide2, #slide3, #slide4, #slide5 {
  display: flex;
  justify-content: center;
  align-items: center;
}

Example 2: javascript autoplay slider

<div class="splide">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">Slide 01</li>
			<li class="splide__slide">Slide 02</li>
			<li class="splide__slide">Slide 03</li>
		</ul>
	</div>
	
	<div class="splide__progress">
		<div class="splide__progress__bar">
		</div>
	</div>
</div>