Tutorial WordPress: Cómo crear un carrusel simple solo con CSS scroll-snap

Introducción

Este tutorial explica, paso a paso y con todo lujo de detalles, cómo crear un carrusel simple en WordPress usando únicamente CSS con la técnica de scroll-snap. No se usa JavaScript: el deslizado funciona con el scroll horizontal nativo (ideal para dispositivos táctiles) y el desplazamiento suave con scroll-behavior. También incluimos cómo integrar el HTML en el editor de bloques (HTML personalizado) y cómo añadir el CSS en WordPress (CSS adicional o mediante un child theme).

Qué logra este patrón

Un carrusel horizontal con páginas (slides) que encajan automáticamente al hacer scroll.
Soporte táctil en móviles y desplazamiento con ruedas/trackpad en escritorio.
Comportamiento suave (smooth) y opciones responsive (1 o múltiples slides visibles según ancho).
Markup accesible básico (roles, tabindex) y buenas prácticas de rendimiento (lazy loading).

Marcado HTML (qué pegar en un bloque HTML o plantilla)

Copia este HTML en un bloque HTML personalizado de Gutenberg, en un widget HTML, o en la plantilla de tu tema (single.php, page.php o un template part). Las imágenes usan loading=lazy y cada slide tiene un id que puede usarse para paginación por anclas si lo deseas.

ltdiv class=wp-carousel role=region aria-label=Galería de imágenes tabindex=0gt
  ltdiv class=wp-carousel-trackgt
    ltfigure class=wp-carousel-item id=slide-1gt
      ltimg src=https://example.com/img1.jpg alt=Descripción de la imagen 1 loading=lazygt
      ltfigcaptiongtTexto del slide 1lt/figcaptiongt
    lt/figuregt
    ltfigure class=wp-carousel-item id=slide-2gt
      ltimg src=https://example.com/img2.jpg alt=Descripción de la imagen 2 loading=lazygt
      ltfigcaptiongtTexto del slide 2lt/figcaptiongt
    lt/figuregt
    ltfigure class=wp-carousel-item id=slide-3gt
      ltimg src=https://example.com/img3.jpg alt=Descripción de la imagen 3 loading=lazygt
      ltfigcaptiongtTexto del slide 3lt/figcaptiongt
    lt/figuregt
    lt!-- Añade más .wp-carousel-item según necesites --gt
  lt/divgt
lt/divgt

lt!-- Opcional: paginación simple con anclas (funciona en muchos navegadores) --gt
ltnav class=wp-carousel-pagination aria-hidden=falsegt
  lta href=#slide-1gt1lt/agt
  lta href=#slide-2gt2lt/agt
  lta href=#slide-3gt3lt/agt
lt/navgt

CSS principal (pegar en Apariencia → Personalizar → CSS adicional o en style.css del child theme)

Este CSS configura el comportamiento de scroll-snap y añade algunas mejoras visuales y de accesibilidad. Pega tal cual y adapta colores, anchos y breakpoints a tu diseño.

/ Contenedor principal /
.wp-carousel {
  width: 100%
  overflow: hidden / evita scroll del body si se quiere track controla el scroll real /
}

/ Track que hace scroll (fila flexible) /
.wp-carousel-track {
  display: flex
  gap: 1rem                         / separación entre slides /
  overflow-x: auto                  / habilita scroll horizontal /
  scroll-snap-type: x mandatory     / aquí reside el snap /
  scroll-behavior: smooth           / desplazamiento suave /
  -webkit-overflow-scrolling: touch / mejor experiencia en iOS /
  padding: 1rem                     / espacio interno opcional /
  margin: 0 -1rem                   / opcional: extender para compensar padding del container /
}

/ Cada slide /
.wp-carousel-item {
  flex: 0 0 100%                    / por defecto: cada slide ocupa el 100% del ancho del track /
  scroll-snap-align: center         / alineación del snap (center, start o end) /
  background: #fff
  border-radius: 8px
  box-shadow: 0 1px 6px rgba(0,0,0,0.08)
  overflow: hidden
  display: block
}

/ Imagen y caption dentro del slide /
.wp-carousel-item img {
  display: block
  width: 100%
  height: auto
  object-fit: cover
}

.wp-carousel-item figcaption {
  padding: .75rem 1rem
  font-size: .95rem
  color: #333
}

/ Ocultar scrollbar visualmente (no accesibilidad) - opcional /
.wp-carousel-track {
  scrollbar-width: thin            / Firefox /
}
.wp-carousel-track::-webkit-scrollbar {
  height: 10px
}
.wp-carousel-track::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2)
  border-radius: 8px
}

/ Responsive: mostrar 2 slides en pantallas medianas, 3 en grandes /
@media (min-width: 700px) {
  .wp-carousel-item { flex: 0 0 calc(50% - 0.5rem) } / 2 por vista /
}
@media (min-width: 1100px) {
  .wp-carousel-item { flex: 0 0 calc(33.333% - 0.66rem) } / 3 por vista /
}

/ Focus visible para teclado /
.wp-carousel:focus {
  outline: 2px solid #3b82f6
  outline-offset: 3px
}

/ Reducir movimiento para usuarios que prefieren menos animación /
@media (prefers-reduced-motion: reduce) {
  .wp-carousel-track { scroll-behavior: auto }
}

/ Paginación (opcional, ligada a anclas) /
.wp-carousel-pagination {
  display: flex
  gap: .5rem
  justify-content: center
  padding: .75rem 0
}
.wp-carousel-pagination a {
  display: inline-block
  width: 10px
  height: 10px
  background: #ddd
  border-radius: 50%
  text-indent: -9999px
  overflow: hidden
}
.wp-carousel-pagination a:focus,
.wp-carousel-pagination a:hover {
  background: #333
}

Explicación de las propiedades clave

overflow-x: auto: permite desplazamiento horizontal del track.
scroll-snap-type: x mandatory: activa el comportamiento de snap en el eje x. mandatory indica que el navegador debe ajustar el scroll al punto más cercano.
scroll-snap-align: en cada elemento del carrusel determina cómo se alinea ese elemento cuando el contenedor realiza el snap (e.g., center, start, end).
scroll-behavior: smooth: suaviza la transición cuando el usuario provoca un scroll programático o al usar anclas.
-webkit-overflow-scrolling: touch: mejora la experiencia de desplazamiento en iOS (momentum scrolling).

Integración en WordPress: opciones prácticas

Opción A — Bloque HTML en Gutenberg

Crea o edita la página/post en Gutenberg.
Añade un bloque HTML personalizado.
Pega el HTML del apartado Marcado HTML.
Pega el CSS del apartado anterior en Apariencia → Personalizar → CSS adicional.

Opción B — En un child theme / plantilla

Si prefieres integrarlo en PHP (por ejemplo dentro de un template part), aquí tienes un ejemplo sencillo para imprimir el HTML desde una plantilla. Puedes adaptar la salida para usar ACF, el loop de attachments o campos personalizados.

lt?php
// Ejemplo simple de plantilla parcial (template-part) para un carrusel con imágenes estáticas
?>
ltdiv class=wp-carousel role=region aria-label=Galería tabindex=0gt
  ltdiv class=wp-carousel-trackgt
    lt?php
    images = array(
      https://example.com/img1.jpg,
      https://example.com/img2.jpg,
      https://example.com/img3.jpg
    )
    i = 1
    foreach ( images as src ) : ?gt
      ltfigure class=wp-carousel-item id=slide-lt?php echo i ?gtgt
        ltimg src=lt?php echo esc_url( src ) ?gt alt=Imagen lt?php echo i ?gt loading=lazygt
      lt/figuregt
    lt?php
      i  
    endforeach
    ?gt
  lt/divgt
lt/divgt

Y para añadir el CSS desde functions.php (enchild theme) puedes encolarlo así:

lt?php
function mytheme_enqueue_carousel_styles() {
  wp_enqueue_style( my-carousel-style, get_stylesheet_directory_uri() . /css/carousel.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, mytheme_enqueue_carousel_styles )
?gt

Accesibilidad y buenas prácticas

Incluye atributos alt descriptivos en las imágenes para lectores de pantalla.
Proporciona un contenedor con role=region y aria-label para que el contenido sea navegable fácilmente.
Permite que el contenedor reciba foco (tabindex=0) para que usuarios con teclado puedan desplazar el carrusel con las teclas del navegador o el trackpad.
Respeta prefers-reduced-motion para desactivar efectos de desplazamiento suave en usuarios que lo indican.
Si necesitas controles prev/next y paginación totalmente accesibles y precisas en todos los navegadores, considera añadir JavaScript posteriormente para gestionar el scroll de forma controlada el enfoque puro CSS funciona bien pero tiene limitaciones en control manual.

Limitaciones y compatibilidad

scroll-snap es compatible con la mayoría de navegadores modernos (Chrome, Edge, Firefox, Safari). Revisa versiones antiguas si necesitas soporte legacy.
El comportamiento exacto de anclas y fragment identifiers dentro de contenedores scrollables puede variar ligeramente entre navegadores. La interacción táctil y el scroll con el dedo funcionan de forma natural.
Sin JavaScript no tendrás funciones avanzadas como autoplay, rebobinado automático o control preciso de animaciones pero obtienes una solución ligera, rápida y natural para usuarios táctiles.

Personalizaciones habituales

Mostrar varias columnas por vista: ajustar el flex-basis (.wp-carousel-item) con media queries (ya incluido en el ejemplo).
Margen / gap entre slides: modificar gap en .wp-carousel-track.
Sombras, bordes y tipografías: estilo visual en .wp-carousel-item y figcaption.
Paginación visual (dots): usar links a los ids de cada slide o crear indicadores CSS personalizados ten en cuenta las consideraciones de compatibilidad de anclas dentro de contenedores scrollables.

Resumen práctico

Con unas pocas reglas CSS (overflow-x, scroll-snap-type, scroll-snap-align y scroll-behavior) y un marcado HTML simple puedes ofrecer un carrusel responsivo y táctil en WordPress sin añadir JavaScript. Inserta el HTML en un bloque personalizado o en tu plantilla y el CSS en el personalizador o en un archivo del tema. Ajusta los breakpoints y estilos visuales según tu proyecto y añade mejoras accesibles como focus states y alt text en imágenes.

SushiHost