Guía Definitiva: Carrusel Infinito con Autoplay (HTML, CSS y JS Nativo)

¿Sabías que añadir una librería solo para un carrusel puede aumentar el tiempo de carga de tu web en hasta un 30%? En un mundo donde cada milisegundo cuenta para el SEO, depender de soluciones externas es un lujo que no deberías permitirte.

En esta guía, vamos a romper con la ‘dependencia de plugins’. Aprenderás a construir un carrusel infinito, fluido y automático usando solo lo que el navegador ya te ofrece: HTML, CSS y JavaScript puro. Es hora de escribir código más limpio, más rápido y 100% bajo tu control. ¡Empecemos!

1. Estructura HTML: Semántica y Accesibilidad

Para que Google entienda que esto es una galería, usamos etiquetas semánticas y atributos aria.

<section class="slider" aria-roledescription="carousel" aria-label="Galería de proyectos">
  <div class="slider__window">
    <div class="slider__container" id="sliderContainer">
      <article class="slider__item"><img src="img-1.jpg" alt="Descripción SEO 1"></article>
      <article class="slider__item"><img src="img-2.jpg" alt="Descripción SEO 2"></article>
      <article class="slider__item"><img src="img-3.jpg" alt="Descripción SEO 3"></article>
    </div>
  </div>
  
  <nav class="slider__controls">
    <button class="slider__btn prev" aria-label="Anterior">❮</button>
    <button class="slider__btn next" aria-label="Siguiente">❯</button>
  </nav>
</section>

2. CSS: Alto Rendimiento

Usamos transform para que la animación sea procesada por la GPU.

.slider__window { overflow: hidden; width: 100%; position: relative; }
.slider__container { display: flex; will-change: transform; }
.slider__item { min-width: 100%; transition: transform 0.5s ease; }
.slider__item img { width: 100%; display: block; }

3. JavaScript: Lógica de Bucle Infinito

const container = document.getElementById('sliderContainer');
let slides = document.querySelectorAll('.slider__item');
let index = 1;

const firstClone = slides[0].cloneNode(true);
const lastClone = slides[slides.length - 1].cloneNode(true);

container.appendChild(firstClone);
container.prepend(lastClone);
container.style.transform = `translateX(-100%)`;

const moveSlide = () => {
  index++;
  container.style.transition = 'transform 0.7s ease-in-out';
  container.style.transform = `translateX(${-index * 100}%)`;

  container.addEventListener('transitionend', () => {
    if (index >= slides.length + 1) {
      container.style.transition = 'none';
      index = 1;
      container.style.transform = `translateX(-100%)`;
    }
  });
};

let slideTimer = setInterval(moveSlide, 3000);
container.addEventListener('mouseenter', () => clearInterval(slideTimer));
container.addEventListener('mouseleave', () => slideTimer = setInterval(moveSlide, 3000));

Conclusión: Menos librerías, más rendimiento

Crear un carrusel infinito desde cero con HTML, CSS y JavaScript es mucho más que un simple ejercicio de programación; es una declaración de intenciones sobre la calidad de tu trabajo. Al evitar librerías pesadas, no solo estás entregando una web más rápida y ligera, sino que estás demostrando un dominio real de las bases del desarrollo web (Vanilla JS).