如何在CSS滑块

Question

我想知道如何添加如何将点击功能设置为我将在下面的CSS滑块中创建的“后退”和“下一步”按钮。我无法想办法正确地做到这一点，所以感谢任何帮助。

这是在图像之间切换的普通滑块：

@keyframes slide {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
}

div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: absolute;
  width: 500%;
  margin: 0;
  left: 0;
  animation: 30s slide infinite; 
}

<div id="slider">
    <figure>
        <img class="carousel" src="CustomerPro2.png" alt=""></div>
         alt="">
        <img class="carousel" src="CustomerPro22.png" alt=""></div>
         alt="">
        <img class="carousel" src="CustomerPro222.png" alt=""></div>
         alt="">
   </figure>
</div>

我需要帮助的是设置两个手动来回移动图像的按钮。谢谢。