CSS - 图像滑块，链接按钮移动

Question

我已经看到已经有一些关于CSS Sliders的问题，但没有一个像我想要的那样。我已经使用并编辑过https://codepen.io/dudleystorey/pen/ehKpi的代码。我添加了两个箭头形式的按钮，并排列在页面的边框。但我不知道如何让按钮通过CSS移动横幅，无法在互联网上找到一些东西。我不能使用JavaScript，因为访问该网站的人都不会对计算有很多了解。你能帮助我吗？这是我已经使用过的代码：

<form id="data" method="post" enctype="multipart/form-data">
    <div id="editor" name="editor">
        Lorem Ipsum...
    </div>
    <input type="submit" name="submit" value="senden" >
    <input type="hidden" id="topicId" value="{TOPIC_ID}" >
</form>

<script>
    $(document).ready(function(){
    $("form#data").submit(function(){
        var formData = new FormData($(this)[0]);
        formData.append('editor', $('#editor').html());

        $.ajax({
            url: 'index.php?page=addPost&topic_id='+$('$topicId').val(),
            type: 'POST',
            data: formData,
            async: false,
            success: function (data) {
                     alert(data);
                     location.reload();
            },
            cache: false,
            contentType: false,
            processData: false
            });
            return false;
        });
    });
</script>

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

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

#previous, #next{
	position:absolute;
	top:30%;
	z-index:500;
	opacity:0.7;
	border:none;
	background:none;
}
#previous{
	left:5%;
}
#next{
	right:5%;
}

我是对的，我只需说他们制作横幅的按钮移动+/- 100％？ 谢谢你的努力

添