Skip to main content
CSS Tip

An infinite image slider

Create an infinite image carousel using a few lines of code:

$n:5; /* number of images*/

.gallery {
--d: 10s; /* duration */

display: grid;
overflow: hidden;
width: 380px;
}
.gallery > img {
grid-area: 1/1;
width: 100%;
aspect-ratio: 1.5;
object-fit: cover;
animation: r var(--d) linear infinite;
}
@for $i from 2 to ($n + 1) {
.gallery > img:nth-child(#{$i}) {animation-delay: calc(#{(1 - $i)/$n}*var(--d))}
}
@keyframes r {
#{100*($n - 1)/$n}% {transform: translate((1 - $n)*100%)}
#{100*($n - 1)/$n + .01}% {transform: translate(100%)}
}

See the Pen CSS only infinite carousel (No duplicated images) by Temani Afif (@t_afif) on CodePen.

More detail: verpex.com/blog/website-tips/how-to-create-an-infinite-image-slider-using-css