<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;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.