.slider { position: relative; width: 600px; margin: 0 auto; }
.viewport { overflow: hidden; width: 100%; }
.track { display: flex; transition: transform 0.4s ease; }
.slide { min-width: 100%; box-sizing: border-box; padding: 20px; background: #eee; text-align: center; }
.prev, .next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.5); color: #fff; border: none; padding: 10px;
  cursor: pointer;
}
.prev { left: 10px } .next { right: 10px }