我想在滑块上添加前进和后退按钮

Question

我需要在我的图像滑块上添加下一个和上一个按钮。

此滑块不使用任何jquery，我很乐意将其保留为这种方式，因为我不太了解它。如果有一种方法可以添加按钮使其与该自动播放滑块一起使用，那就太不可思议了。

<div id="slider">
<figure>
<a href="http://www.aecageco.com/Products/A-E/">
<img src="https://system.na3.netsuite.com/core/media/media.nl? 
id=612722&c=977154&h=ee558d4c2a4fde4015d8" alt></a>

<a href="http://www.aecageco.com/Products/Animal-Travel-Carriers/">
<img src="https://system.na3.netsuite.com/core/media/media.nl? 
id=633562&c=977154&h=28f65571c7db3e50f19e" alt></a>

<a href="http://www.aecageco.com/Products/Happy-Beaks-Bird-Toys/">
<img src="http://shopping.na3.netsuite.com/core/media/media.nl? 
id=445326&c=977154&h=cef6c10c5f3c15c3ab99" alt></a>

</figure>
</div>

<style>
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
position: relative;
width: 500%;
margin: 5px auto;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite; 
box-shadow:0px 0px 30px #000;
}

</style>