javascript autoplay slider

1<section id="slider">
2    <input type="radio" name="slider" id="s1">
3    <input type="radio" name="slider" id="s2">
4    <input type="radio" name="slider" id="s3" checked>
5    <input type="radio" name="slider" id="s4">
6    <input type="radio" name="slider" id="s5">
7    <label for="s1" id="slide1">Slide 1</label>
8    <label for="s2" id="slide2">Slide 2</label>
9    <label for="s3" id="slide3">Slide 3</label>
10    <label for="s4" id="slide4">Slide 4</label>
11    <label for="s5" id="slide5">Slide 5</label>
12
13Here's my CSS 
14
15* {
16}
17
18body {
19box-sizing: border-box;
20margin: 0 auto;
21}
22
23input[type=radio] {
24  display: none;
25}
26
27#slider {
28  margin-top: 10px;
29  height: 300px;
30  width: auto;
31  position: relative;
32  perspective: 40rem;
33  transform-style: preserve-3d;
34}
35
36#slider label {
37  margin: auto;
38  width: 40%;
39  height: 400px;
40  border-radius: 10px;
41  position: absolute;
42  left: 0; right: 0;
43  cursor: pointer;
44  transition: transform 0.9s ease;
45}
46/* far left*/
47#s1:checked ~ #slide4, #s2:checked ~ #slide5,
48#s3:checked ~ #slide1, #s4:checked ~ #slide2,
49#s5:checked ~ #slide3 {
50  box-shadow: 0 5px 8px 0 rgba(0,0,0,.37);
51  transform: translate3d(-65%,0,-200px) rotateY(10deg);
52}
53/* left */
54#s1:checked ~ #slide5, #s2:checked ~ #slide1,
55#s3:checked ~ #slide2, #s4:checked ~ #slide3,
56#s5:checked ~ #slide4 {
57  box-shadow: 0 12px 15px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
58  transform: translate3d(-25%,0,-100px) rotateY(10deg);
59}
60/* middle */
61#s1:checked ~ #slide1, #s2:checked ~ #slide2,
62#s3:checked ~ #slide3, #s4:checked ~ #slide4,
63#s5:checked ~ #slide5 {
64  box-shadow: 0px 30px 80px -9px rgba(0,0,0,0.5), 0 11px 7px 0 rgba(0,0,0,.19);
65  transform: translate3d(0,0,0);
66}
67/* right */
68#s1:checked ~ #slide2, #s2:checked ~ #slide3,
69#s3:checked ~ #slide4, #s4:checked ~ #slide5,
70#s5:checked ~ #slide1 {
71  box-shadow: 0 12px 15px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
72  transform: translate3d(25%,0,-100px) rotateY(-10deg);
73}
74/* far right */
75#s1:checked ~ #slide3, #s2:checked ~ #slide4,
76#s3:checked ~ #slide5, #s4:checked ~ #slide1,
77#s5:checked ~ #slide2 {
78  box-shadow: 0 5px 8px 0 rgba(0,0,0,.37);
79  transform: translate3d(65%,0,-200px) rotateY(-10deg);
80}
81
82/*slide content*/
83#slide1 { background: #00bcd4 }
84#slide2 { background: #4caf50 }
85#slide3 { background: #6a4caf }
86#slide4 { background: #ffc107 }
87#slide5 { background: #ff5722 }
88
89#slide1, #slide2, #slide3, #slide4, #slide5 {
90  display: flex;
91  justify-content: center;
92  align-items: center;
93}
94

1<div class="splide">
2	<div class="splide__track">
3		<ul class="splide__list">
4			<li class="splide__slide">Slide 01</li>
5			<li class="splide__slide">Slide 02</li>
6			<li class="splide__slide">Slide 03</li>
7		</ul>
8	</div>
9	
10	<div class="splide__progress">
11		<div class="splide__progress__bar">
12		</div>
13	</div>
14</div>