如何在幻灯片动画中添加按钮？

Question

我需要添加按钮在此动画滑块中前后移动。 我尝试了输入广播，但是无法正常工作。 有人有任何想法如何表达吗？ 我现在开始编程，所以请大声笑。

<style type="text/css">
        #slider{
            overflow: hidden;
        }
        #slider figure{
            position: relative;
            width: 500%;
            margin: 0;
            left: 0;
            animation: 10s slider infinite;
        }
        #slider figure img{
            width: 20%;
            float: left;
        }
        @keyframes slider {
    0% {
        left: 0;
    }
    45% {
        left: -100%;
    }
    50% {
        left: -100%;
    }
    70% {
        left: -100%;
    }
    75% {
        left: -100%;
    }
    95% {
        left: -00%;
    }
    100% {
        left: 00%;
    }

    #i1, #i2{
        display: none;
    }

    </style>
    <div id="slider">
        <figure>
            <img src="export/bgv2.jpg">
            <img src="export/bgv.jpg">
        </figure>
    </div>
</body>