Introducción

Este tutorial explica, paso a paso y con todo lujo de detalles, cómo transformar el bloque de galería de WordPress en un carrusel horizontal usando únicamente CSS con la propiedad scroll-snap. No se usa JavaScript: aprovechamos la estructura HTML que genera el bloque de galería (o una clase personalizada) y aplicamos estilos CSS modernos para obtener un carrusel táctil, fluido y accesible.

Anatomía del bloque de galería (ejemplo típico)

Antes de escribir CSS conviene identificar la estructura HTML que genera WordPress. Un ejemplo reciente del bloque de galería puede verse así:

Dependiendo de la versión y configuración del editor, puede usar ltul class=wp-block-gallerygt con li.blocks-gallery-item o bien div.blocks-gallery-grid gt figure.blocks-gallery-item. Ajusta los selectores del CSS al marcado real que tenga tu instalación.

Pasos previos: configuración del bloque

• Inserta la galería en el editor de bloques.
• En las opciones de bloque, si quieres permitir enfoque en las imágenes para navegación por teclado, configura las imágenes para que enlacen a la “archivo multimedia” o a la “página de adjunto” (esto hace que cada imagen tenga un ltagt envolvente focusable).
• Si prefieres, añade una clase CSS personalizada desde la pestaña “Avanzado” del bloque (por ejemplo: gallery-carousel), para apuntar solo a esa galería.

CSS base: convertir la galería en carrusel con scroll-snap

Este bloque de código es la base mínima. Cambia los selectores según tu HTML (.gallery-carousel, .wp-block-gallery, .blocks-gallery-grid, etc.).

/ Selector de ejemplo: aplica solo a galerías con la clase gallery-carousel /
.wp-block-gallery.gallery-carousel,
.wp-block-gallery.gallery-carousel .blocks-gallery-grid {
  display: flex                      / fila flexible /
  flex-wrap: nowrap                  / no wrapping: una fila contínua /
  gap: 1rem                          / separación entre items /
  overflow-x: auto                   / scroll horizontal /
  scroll-snap-type: x mandatory      / habilita scroll-snap horizontal /
  -webkit-overflow-scrolling: touch  / inercia en iOS /
  padding: 1rem 0                    / espacio vertical /
}

/ Cada elemento se trata como slide /
.wp-block-gallery.gallery-carousel .blocks-gallery-item,
.wp-block-gallery.gallery-carousel li.blocks-gallery-item,
.wp-block-gallery.gallery-carousel figure {
  flex: 0 0 auto                     / tamaño fijo según contenido /
  scroll-snap-align: center          / alineación al hacer snap /
  scroll-snap-stop: always           / intenta detener en cada slide /
  width: min(80vw, 420px)            / ancho responsivo por slide /
  box-sizing: border-box
}

Explicación rápida

• display:flex overflow-x:auto: convierte la galería en una fila desplazable.
• scroll-snap-type: x mandatory: obliga al navegador a encajar las slides tras el scroll.
• scroll-snap-align: center: cada slide quedará centrada cuando haga snap.
• width: min(80vw, 420px): hace que el tamaño sea responsivo se puede ajustar para mostrar parcialmente el siguiente elemento.

Mejoras visuales y responsivas

Controlar la altura, el recorte y el aspecto de las imágenes para que el carrusel quede consistente en todas las pantallas.

/ Asegura que las imágenes llenen el slide y mantengan proporción /
.wp-block-gallery.gallery-carousel img {
  width: 100%
  height: auto
  display: block
  border-radius: 8px
  object-fit: cover        / recorta si es necesario (mejor combinado con is-cropped) /
}

/ Opcional: fuerza una altura visual consistente /
.wp-block-gallery.gallery-carousel .blocks-gallery-item img {
  height: 260px            / ajuste según diseño /
  object-fit: cover
}

/ Muestra más de un slide en pantallas grandes /
@media (min-width: 900px) {
  .wp-block-gallery.gallery-carousel .blocks-gallery-item {
    width: calc(33.333% - 1rem)  / tres por pantalla, por ejemplo /
  }
}

Ocultar scrollbars (estética) manteniendo accesibilidad

Ocultar barras de desplazamiento mejora la estética, pero no debe impedir el scroll ni el acceso por teclado.

/ Ocultar scrollbar en WebKit /
.wp-block-gallery.gallery-carousel {
  scrollbar-width: thin / para Firefox /
  scrollbar-color: rgba(0,0,0,0.2) transparent
}
.wp-block-gallery.gallery-carousel::-webkit-scrollbar {
  height: 10px
}
.wp-block-gallery.gallery-carousel::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15)
  border-radius: 999px
}
/ Si quieres ocultarlo completamente (cuidado con accesibilidad) /
/
.wp-block-gallery.gallery-carousel::-webkit-scrollbar { display: none }
/

Navegación por teclado y accesibilidad (sin JS)

El mejor soporte accesible es que los elementos de la galería sean enfocables (enlace ltagt o tabindex=0 en cada figura). Si las imágenes tienen enlaces, el usuario puede navegar con Tab y Shift Tab. Usa estilos visibles para el foco.

/ Resaltar el slide cuando está enfocado (mejor visibilidad para teclado) /
.wp-block-gallery.gallery-carousel a:focus,
.wp-block-gallery.gallery-carousel a:focus-visible,
.wp-block-gallery.gallery-carousel figure:focus-within {
  outline: 3px solid rgba(50,115,220,0.35)
  outline-offset: 4px
  transform: translateY(-4px)    / micro-interacción visual /
  transition: transform 160ms ease
}

Si tus figuras no contienen enlaces, puedes añadir tabindex=0 manualmente en el HTML del bloque (usando un bloque HTML) o usar un filtro / bloque dinámico para que la figura sea focusable. Preferible: enlaza las imágenes a la url del adjunto para mantener la semántica y permitir la interacción por teclado.

Captions (pies) y enfoque visual

/ Captions discretos sobre la imagen /
.wp-block-gallery.gallery-carousel figcaption {
  margin-top: 0.5rem
  font-size: 0.95rem
  color: #333
  text-align: center
  max-width: 100%
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
}

Compatibilidad y fallback

• La mayoría de navegadores modernos (Chrome, Edge, Firefox, Safari) soportan scroll-snap en navegadores antiguos el contenedor seguirá siendo una fila horizontal desplazable (overflow-x:auto) sin el efecto de “snap”.
• Para iOS, -webkit-overflow-scrolling: touch mejora la inercia y la sensación nativa.
• Si quieres un comportamiento idéntico en navegadores sin soporte, necesitarías JavaScript — pero el objetivo aquí es una solución 100% CSS con buen comportamiento progresivo.

Estilos opcionales: mostrar parte del siguiente slide (promueve la interacción)

/ Muestra parcialmente el siguiente item: reduce el ancho y añade padding lateral /
.wp-block-gallery.gallery-carousel {
  padding-left: 1.25rem
  padding-right: 1.25rem
}
.wp-block-gallery.gallery-carousel .blocks-gallery-item {
  width: calc(75vw - 1rem) / deja espacio lateral para vislumbrar el siguiente /
  max-width: 480px
}
@media (min-width: 900px) {
  .wp-block-gallery.gallery-carousel .blocks-gallery-item {
    width: calc(33.333% - 1rem)
  }
}

Cómo añadir este CSS en WordPress

1. En el panel de administración: Apariencia → Personalizar → CSS adicional. Pega las reglas CSS y guarda.
2. O en tu tema hijo: añade las reglas al archivo style.css del tema hijo.
3. Si prefieres cargar un archivo CSS específico desde functions.php (tema hijo), ejemplo:

// functions.php (tema hijo) — encolar stylesheet para custom gallery
function tema_hijo_enqueue_gallery_carousel() {
  wp_enqueue_style( gallery-carousel, get_stylesheet_directory_uri() . /css/gallery-carousel.css, array(), 1.0 )
}
add_action( wp_enqueue_scripts, tema_hijo_enqueue_gallery_carousel )

Selector específico si usas la clase personalizada

Si añadiste la clase gallery-carousel desde la configuración del bloque, usar .wp-block-gallery.gallery-carousel en los ejemplos anteriores aísla el estilo a ese bloque concreto. Si no, adapta a .wp-block-gallery o a la estructura real.

Consejos finales y buenas prácticas

• Prueba en dispositivos táctiles y con teclado. Asegúrate de que las imágenes tienen texto alternativo (alt) significante.
• No ocultes por completo las barras de desplazamiento si esperas que usuarios no toquen la pantalla (accesibilidad).
• Usa valores de anchura responsivos (vw, max-width) para que el carrusel se vea bien en móviles y escritorio.
• Si tu tema añade estilos agresivos al bloque de galería, usa selectores específicos o !important como último recurso.

Resumen

Con unas pocas reglas CSS (display:flex, overflow-x:auto, scroll-snap-type y scroll-snap-align) puedes convertir una galería de WordPress en un carrusel táctil y accesible sin JavaScript. Personaliza anchos, gaps y estilos de foco para encajar el componente en tu diseño y recuerda probar en varios navegadores y dispositivos para garantizar una buena experiencia progresiva.