title: Autoplay slider with javascript
body: <p>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 ..</p>
  
  <p>Im asked to make an autoplay slider which changes slides every 5s ...</p>
  
  <p>I builded my slider with inputs which shows the checked input in the middle but no clue how to make it work with js.. </p>
  
  <p>what i want to do with javascript : when "input" is checked => wait 5s and next input is checked and so on ....</p>
  
  <p>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 ... </p>
  
  <p>Here's my HTML </p>
  
  <pre><code>&lt;section id="slider"&gt;
      &lt;input type="radio" name="slider" id="s1"&gt;
      &lt;input type="radio" name="slider" id="s2"&gt;
      &lt;input type="radio" name="slider" id="s3" checked&gt;
      &lt;input type="radio" name="slider" id="s4"&gt;
      &lt;input type="radio" name="slider" id="s5"&gt;
      &lt;label for="s1" id="slide1"&gt;Slide 1&lt;/label&gt;
      &lt;label for="s2" id="slide2"&gt;Slide 2&lt;/label&gt;
      &lt;label for="s3" id="slide3"&gt;Slide 3&lt;/label&gt;
      &lt;label for="s4" id="slide4"&gt;Slide 4&lt;/label&gt;
      &lt;label for="s5" id="slide5"&gt;Slide 5&lt;/label&gt;
  
  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;
  }
  </code></pre>