Slider Infinito

Un carrusel animado de elementos que se mueven infinitamente de derecha a izquierda.

Utiliza position: absolute, left, y animation-delay para colocar cada ítem y animarlo de forma sincronizada.
will-change: left mejora el rendimiento cuando no hay demasiados elementos.

Infinite Slider Preview

HTML

infinite-slider.html

<!-- Variables:
  --i: índice del elemento (desde 1)
  --len: cantidad total de elementos
  --width: ancho de cada item
  --height: alto de cada item
  --dir: (opcional) dirección de la animación (normal | reverse)
-->
<div class="slider" style="--width: 7rem;--height: 5rem;--len: 10;--dir: normal;">
  <div class="list">
    <div class="item" style="--i:1"></div>
    <div class="item" style="--i:2"></div>
    <div class="item" style="--i:3"></div>
    <div class="item" style="--i:4"></div>
    <div class="item" style="--i:5"></div>
    <div class="item" style="--i:6"></div>
    <div class="item" style="--i:7"></div>
    <div class="item" style="--i:8"></div>
    <div class="item" style="--i:9"></div>
    <div class="item" style="--i:10"></div>
  </div>
</div>

CSS

infinite-slider.css

.slider {
  --duration: 10s;
  margin-inline: auto;
  width: 100%;
  overflow: clip;
  /* Opcional: difumina los extremos */
  mask-image: linear-gradient(to right, transparent, black 5% 95%, transparent);

  .list {
    display: flex;
    position: relative;
    min-width: calc(var(--width) * var(--len));
    width: 100%;
    min-height: var(--height);

    .item {
      width: var(--width);
      height: var(--height);
      position: absolute;
      animation: slider var(--duration) linear infinite;
      animation-delay: calc((var(--duration) / var(--len)) * (var(--i) - 1) - var(--duration)) !important;
      animation-direction: var(--dir); /* normal (default) | reverse */
      will-change: left; /* Recomendado si hay pocos elementos (< 50) */
    }
  }
}

@keyframes slider {
  from { left: 100%; }
  to { left: calc(var(--width) * -1); }
}

/* Estilos de ejemplo */
.slider .list {
  .item {
    border-radius: 0.75rem;
    &:nth-child(odd) { background: linear-gradient(in oklch to top left, #000000, #150050, #3f0071); }
    &:nth-child(even) { background: linear-gradient(in oklch to top right, #030637, #3c0753, #720455); }
    transition: filter 600ms;
  }
  &:has(.item:hover) {
    .item { animation-play-state: paused; }
    .item:not(:hover) { filter: invert(); }
  }
}

🎯 Tips de rendimiento

• Si tienes más de 50 elementos, considera remover will-change.
• left funciona mejor que transform para este tipo de slider con animation-delay.
• Evita usar overflow: hidden si necesitas efectos de máscara personalizados.

---

En construcción ;)