Construcción de Carruseles Fluidos con CSS Puro

Durante años, crear carruseles significaba recurrir a bibliotecas JavaScript como Swiper o Glide. Cada una añadía kilobytes a tu bundle, introducía dependencias y requería una gestión cuidadosa de event listeners y estado. Pero el CSS moderno ha evolucionado silenciosamente para manejar carruseles de forma nativa—sin necesidad de JavaScript.

Este artículo explora cómo construir carruseles CSS eficientes y accesibles utilizando scroll-snap, pseudo-elementos experimentales y otras técnicas de CSS puro que funcionan hoy y seguirán siendo relevantes durante años.

La Base: Scroll Snap CSS

La piedra angular de cualquier carrusel CSS puro es la propiedad scroll-snap. Transforma un contenedor desplazable en una experiencia paginada con solo unas pocas líneas:

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.carousel-item {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

Esto crea un carrusel horizontal donde cada elemento se ajusta en su lugar. La palabra clave mandatory asegura que los usuarios siempre lleguen a una diapositiva completa, mientras que scroll-behavior: smooth añade transiciones fluidas entre elementos.

Scroll Snap CSS funciona en todos los navegadores modernos, convirtiéndolo en la base más confiable para carruseles sin JavaScript. Para diseños responsivos, combínalo con CSS Grid o ajusta el flex-basis para mostrar múltiples elementos por vista:

.carousel-item {
  flex: 0 0 calc(33.333% - 1rem);
  margin: 0 0.5rem;
}

Navegación Moderna: Pseudo-Elementos Experimentales

Chrome 135+ introduce pseudo-elementos experimentales que generan controles de carrusel automáticamente. Estas características requieren habilitar las funciones experimentales de plataforma web en las flags de Chrome.

El pseudo-elemento ::scroll-button crea botones de anterior/siguiente sin marcado adicional:

.carousel::scroll-button(inline-start),
.carousel::scroll-button(inline-end) {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 1rem;
  border: none;
}

.carousel::scroll-button(inline-start)::before {
  content: "←";
}

.carousel::scroll-button(inline-end)::before {
  content: "→";
}

De manera similar, ::scroll-marker genera puntos de paginación para cada sección desplazable:

.carousel {
  scroll-marker-group: after;
}

.carousel-item::scroll-marker {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
}

.carousel-item::scroll-marker:target-current {
  background: #333;
}

Ten en cuenta que estos pseudo-elementos son experimentales y su sintaxis puede cambiar. La pseudo-clase :target-current resalta el marcador activo mientras los usuarios se desplazan. Estas características reducen los requisitos de JavaScript mientras proporcionan soporte de accesibilidad nativo.

Estrategia de Fallback para Producción

Dado que scroll-button y scroll-marker tienen soporte limitado en navegadores, utiliza detección de características con @supports:

/* Navegación de fallback */
.carousel-nav {
  display: flex;
  gap: 0.5rem;
}

/* Ocultar fallback cuando los controles nativos están soportados */
@supports (scroll-button-inline: both) {
  .carousel-nav {
    display: none;
  }
}

Para mayor compatibilidad, combina scroll-snap con enlaces de anclaje para la navegación:

<nav class="carousel-nav">
  <a href="#slide1">1</a>
  <a href="#slide2">2</a>
  <a href="#slide3">3</a>
</nav>

<div class="carousel">
  <div id="slide1" class="carousel-item">...</div>
  <div id="slide2" class="carousel-item">...</div>
  <div id="slide3" class="carousel-item">...</div>
</div>

Carrusel CSS con Autoplay Sin JavaScript

Crear un carrusel CSS con autoplay requiere solo animaciones con keyframes:

@keyframes slide {
  0%, 20% { transform: translateX(0); }
  25%, 45% { transform: translateX(-100%); }
  50%, 70% { transform: translateX(-200%); }
  75%, 95% { transform: translateX(-300%); }
  100% { transform: translateX(0); }
}

.autoplay-carousel {
  display: flex;
  animation: slide 12s infinite;
}

.autoplay-carousel:hover {
  animation-play-state: paused;
}

Esta técnica funciona de manera confiable pero sacrifica el control del usuario por simplicidad. Pausar al pasar el cursor mejora la usabilidad, y combinarlo con prefers-reduced-motion respeta las preferencias de accesibilidad:

@media (prefers-reduced-motion: reduce) {
  .autoplay-carousel {
    animation: none;
  }
}

Accesibilidad y Rendimiento

Los carruseles CSS puro sobresalen en rendimiento—sin parsing de JavaScript, sin event listeners, sin layout thrashing. El desplazamiento nativo del navegador maneja automáticamente las entradas táctiles, de teclado y de ratón.

Para accesibilidad, asegúrate de:

• Scroll-snap proporciona desplazamiento suave, pero la navegación completa por teclado y los controles accesibles requieren las nuevas características ::scroll-button y ::scroll-marker.
• Los indicadores de foco permanecen visibles
• El contenido sigue siendo accesible cuando CSS falla
• Los objetivos táctiles cumplen con el tamaño mínimo de 44×44px

Añade etiquetas ARIA para mejorar la experiencia del lector de pantalla:

<div class="carousel" role="region" aria-label="Galería de Productos">
  <div class="carousel-item" aria-label="Diapositiva 1 de 3">...</div>
</div>

Conclusión

El CSS moderno ha eliminado la necesidad de bibliotecas JavaScript para carruseles en la mayoría de los casos. Scroll-snap proporciona la base hoy, mientras que las características emergentes como scroll-button y scroll-marker anticipan un futuro donde los componentes UI complejos requieren cero JavaScript. Estas técnicas reducen el tamaño de los bundles, mejoran el rendimiento y simplifican el mantenimiento—beneficios que se acumulan con el tiempo.

Comienza con scroll-snap para sitios en producción. Experimenta con los nuevos pseudo-elementos en Chrome. Lo más importante, cuestiona si realmente necesitas esa biblioteca de carrusel de 50KB cuando 20 líneas de CSS logran el mismo resultado.

Preguntas Frecuentes

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..