CSS slideshow test

HTML

<h1>CSS timeline slides</h1>

<!-- Timeline slides HTML init -->
<div class="timeline-container">
  <div class="timeline">
    <div class="time-image"></div>
    <div class="time-image"></div>
    <div class="time-image"></div>
    <div class="time-image"></div>
    <div class="time-image"></div>
  </div>
  </div>
<button class="prev-button"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow"></path></svg>
</button>
<button id ="next-button" class="next-button"><svg viewBox="0 0 100 100"><path d="M 10,50 L 60,100 L 70,90 L 30,50  L 70,10 L 60,0 Z" class="arrow" transform="translate(100,100) rotate(180)"></path></svg>
</button>

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.timeline-container {
  overflow: hidden;
  width:80%;
  height: 100px;
}

.timeline {
  background: #FAFAFA;
}

.time-image {
  width: 100px;
  height: 100px;
  overflow: hidden;
  margin-left: 2%;
  margin-bottom: 20px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: time-image;
  z-index: 1;
  display:inline-block;
}


/* cell number */

.time-image:before {
  display: block;
  text-align: center;
  content: counter(time-image);
  line-height: 100px;
  font-size: 20px;
  color: white;
}

.prev-button {
  position: absolute;
  top: 40%;
  width: 44px;
  height: 44px;
  border: solid 1px gray;
  border-radius: 50%;
  background: white;
  cursor: pointer;
}

.next-button {
  position: absolute;
  top: 40%;
  width: 44px;
  height: 44px;
  border: solid 1px gray;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  margin-left: 600px;
}

JavaScript

window.addEventListener("load", init);

function init() {
	var button = 		document.getElementById("next-button");
  button.addEventListener("click", action);
}

function action(){
console.log("button was clicked");
}