MEDIOS SCROLL-SNAP
CAROUSEL

0. Cómo añadir el carrusel en el editor (paso de configuración)

1. En el editor de bloques, añade el bloque Carrusel multimedia (desplazamiento rápido).
2. Seleccione el modo Manual cuando se le solicite (esta función solo está disponible en contexto).
3. Subir o seleccionar varias imágenes
4. (Opcional) Para cada imagen:
   • – Haga clic en el icono del enlace de la imagen.
   • – Establecer una URL (y un destino si es necesario)
5. En el Panel de configuración de bloques (barra lateral derecha):
   • Habilitar o deshabilitar la paginación móvil
6. Guarda/publica la página y pruébala en el front-end.

1. Comprobaciones visuales y de diseño

Orientación de la imagen

Verifica que el carrusel se muestre correctamente en los siguientes casos (todos los escenarios ya creados anteriormente):

• Mezcla de imágenes verticales y horizontales
• Imágenes solo de paisajes
• Imágenes solo de retratos

Previsto:

• La orientación se deriva automáticamente de la relación de aspecto de la imagen.
• Las diapositivas mantienen una altura constante (esta es una configuración en la barra lateral, predeterminada: 450 píxeles).
• El diseño coincide con Figma en ordenadores de sobremesa y dispositivos móviles.

2. Pedidos y contenido

• Las imágenes aparecen en el orden exacto establecido en el editor (haz clic en «Editar imágenes» para reordenarlas arrastrando y soltando).
• Reordenar las imágenes en el CMS actualiza el orden del front-end.

3. Comportamiento del escritorio

• Las flechas izquierda/derecha son visibles en el escritorio.
• Al hacer clic en las flechas se navega entre las diapositivas.
• El carrusel no se desplaza más allá de la primera o última diapositiva.
• El comportamiento en pantallas más anchas coincide con el de Figma (sin flechas y contenido centrado).

4. Comportamiento móvil

• Desliza el dedo hacia la izquierda o hacia la derecha para navegar por las diapositivas.
• El desplazamiento nativo y el comportamiento de ajuste se sienten fluidos.
• Paginación 1 / n:
  • Se muestra solo en dispositivos móviles.
  • Se muestra solo si está habilitado en la configuración del bloque.
  • Refleja correctamente el índice de diapositivas actual.

5. Enlaces de imágenes (modo manual)

Si los enlaces de imagen están configurados en el editor:

• Al hacer clic en una imagen, se navega a la URL configurada.
• Las imágenes sin enlace no son clicables.
• Las imágenes vinculadas se comportan correctamente en dispositivos móviles y ordenadores de sobremesa.

7. Comprobaciones de accesibilidad

Teclado

• Los controles del carrusel se pueden seleccionar mediante la tecla Tab.
• Los botones de flecha se pueden activar con la tecla Intro.
• Las flechas del teclado (derecha/izquierda) controlan el carrusel.
• Las imágenes vinculadas se pueden activar mediante el teclado.

Lector de pantalla

• El contenido se lee en orden lógico.
• Los controles de paginación y navegación se anuncian correctamente.

8. Fuera de alcance: Modo destacado

Dado que este carrusel amplía el «carrusel multimedia» existente, se puede utilizar en cualquier tipo de publicación que utilice imágenes destacadas con el modo «destacado» en lugar del modo manual.
A continuación, extraerá el contenido de las imágenes destacadas adjuntas a la publicación, por lo que este componente se puede utilizar dentro del bloque Query Loop o en páginas individuales, como en los ejemplos que se muestran a continuación:

PÁGINA DE OFERTA ÚNICA (bloque añadido en la parte inferior)

LISTA DE BUCLES DE CONSULTA (no existe en Figma):