<div id="slider">
<div id="slide-holder">
  <div class="slide"><img src="https://unsplash.it/400/200/?image=934" alt="" /></div>
    <div class="slide"><img src="https://unsplash.it/400/200/?image=1045" alt="" /></div>
    <div class="slide"><img src="https://unsplash.it/400/200/?image=215" alt="" /></div>
</div>

$slide-width: 400px;
$slide-height: 200px;

#slider {
	width: $slide-width;
	height: $slide-height;
	overflow: hidden;
  border: 1px solid #c69;
}

.slide {
	width: $slide-width;
	height: $slide-height;
	float: left;
	position: relative;
}

#slide-holder {
  // wide enough to fit all the slides
	width: 400%;
	position: relative;
	left: 0;
	animation: scroller 10s infinite;
}

// need a step for each slide
@keyframes scroller {
  0% { transform: translateX(0); }
  33% { transform: translateX(-$slide-width); }
  66% { transform: translateX(-$slide-width*2); }
  100% { transform: translateX(0); }
}

// additional styling
body {
  font-family: sans-serif;
}

#slider {
  margin: 0 auto;
}

// in case images break:

.slide:nth-child(1) {
  background: #c69;
}

.slide:nth-child(2) {
  background: wheat;
}

.slide:nth-child(3) {
  background: #eee;
}