<div class="slider">
<div class="slider-content">
<img src="https://source.unsplash.com/random/900x400"><img src="https://source.unsplash.com/random/900x401"><img src="https://source.unsplash.com/random/900x402">
</div>
</div>
.slider {
margin: auto;
width: 900px;
height: 400px;
overflow: hidden;
}
.slider-content {
width: 2700px;
height: 400px;
position: relative;
animation-name: slider;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
}
@keyframes slider {
0% {
left: 0px;
}
20% {
left: 0px;
}
25% {
left: -900px;
}
70% {
left: -900px;
}
75% {
left: -1800px;
}
100% {
left: -1800px;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.