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

More CSS Tips