Привет, ломаю голову, как мне на слайдере можно добавить элементы управления стрелочки вперед назад, без js?

@import url(https://fonts.googleapis.com/css?family=Istok+Web);
@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%;
  }
}

* {
  box-sizing: border-box;
}

body,
figure {
  margin: 0;
  background: #101010;
  font-family: Istok Web, sans-serif;
  font-weight: 100;
}

div#captioned-gallery {
  width: 98.7%;
  overflow: hidden;
  margin: 6.5px;
}

figure.slider {
  position: relative;
  width: 500%;
  font-size: 0;
  animation: 20s slidy infinite;
}

figure.slider figure {
  width: 20%;
  height: auto;
  display: inline-block;
  position: inherit;
}

figure.slider img {
  width: 100%;
  height: auto;
}

figure.slider figure figcaption {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  width: 100%;
  font-size: 2rem;
  padding: .6rem;
}

<div class="content">
  <h1>Новости</h1>
  <div id="captioned-gallery">
    <figure class="slider">
      <figure>
        <a href="https://www./" target="_blank">
          <img src="https://picsum.photos/id/237/536/354" alt="" title="Детальніше">
        </a>
        <figcaption>

        </figcaption>
      </figure>
      <figure>
        <img src="https://picsum.photos/id/237/536/354" alt>
        <figcaption>Wanaka, New Zealand</figcaption>
      </figure>
      <figure>
        <img src="https://picsum.photos/id/237/536/354" alt>
        <figcaption>Utah, United States</figcaption>
      </figure>
      <figure>
        <img src="https://picsum.photos/id/237/536/354" alt>
        <figcaption>Bryce Canyon, Utah, United States</figcaption>
      </figure>
      <figure>
        <img src="https://picsum.photos/id/237/536/354" alt>
        <figcaption>Hobbiton, New Zealand</figcaption>
      </figure>
    </figure>

  </div>
</div>