Autoplay slider with javascript

Question

im asked to make a autoplay slider but after learning javascript ... i still have no clue how to apply what i've learned ... Need some help ..

Im asked to make an autoplay slider which changes slides every 5s ...

I builded my slider with inputs which shows the checked input in the middle but no clue how to make it work with js..

what i want to do with javascript : when "input" is checked => wait 5s and next input is checked and so on ....

I also need to be able to stop the autoplay when i click on the slider / and be able to switch slides with the keyboard's arrows ...

Here's my HTML

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

Answer 1

Check w3 slideshow https://www.w3schools.com/w3css/w3css_slideshow.asp That maybe help you.