body {
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-family:Helvetica,Sans-serif;
}
.slider {
  width:100vw;
  height:555px;
  display:flex;
  overflow:hidden;
  position:relative;
  margin:20px 0;
}
.slider:nth-child(2) {
  width:0vw;
  height:0vw;
}
.slider:after {
  content:'\27A4';
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  font-size:500%;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:rgba(255,255,255,.3);
  cursor:pointer;
  color:#555;
}
.slider:after {
  left:auto;
  right:0;
}
.slider > div {
  flex: 0 0 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:200%;
  color:#FFF;
  transition:margin-left .3s;
}