我被要求做一个自动播放滑块，但学习javascript后...我仍然不知道如何应用我所学到的...需要一些帮助..
我要求做一个自动播放滑块，每5秒改变幻灯片...
我用输入构建了我的滑块，它在中间显示选中的输入，但不知道如何使它与JS一起工作。
我想用javascript做什么：检查“输入”时=〉等待5s，检查下一个输入，依此类推......
我还需要能够停止自动播放时，我点击滑块/并能够切换幻灯片与键盘的箭头...
这是我的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;
}