MEDIAS SCROLL-SNAP
CARRUSEL

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 (Scroll-snap) »
2. Selecciona el modo manual cuando se te solicite (esta función solo está disponible en contexto)
3. Sube o selecciona varias imágenes
4. (Opcional) Para cada imagen:
   • – Haz clic en el icono del enlace que aparece en la imagen
   • – Establece una URL (y un destino, si es necesario)
5. En el panel de configuración de bloques (barra lateral derecha):
   • Activar o desactivar la paginación móvil
6. Guarda o publica la página y pruébala en la interfaz de usuario

1. Comprobaciones visuales y de maquetación

Orientación de la imagen

Comprueba que el carrusel se muestre correctamente en los siguientes casos (todos los escenarios ya se han creado anteriormente):

• Mezcla de imágenes en formato vertical y horizontal
• Imágenes exclusivamente de paisajes
• Imágenes exclusivamente de retratos

Previsto:

• La orientación se calcula automáticamente a partir de la relación de aspecto de la imagen.
• Las diapositivas mantienen una altura constante (esta es una opción de la barra lateral; valor por defecto: 450 px).
• El diseño coincide con el de Figma tanto en ordenador como en móvil

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).
• Al cambiar el orden de las imágenes en el CMS, se actualiza el orden en la interfaz de usuario

3. Comportamiento del escritorio

• Las flechas de izquierda y derecha se ven en el ordenador
• Al hacer clic en las flechas se pasa de una diapositiva a otra
• El carrusel no se desplaza más allá de la primera o la última diapositiva
• El comportamiento en pantallas más anchas coincide con el de Figma (sin flechas y con el contenido centrado)

4. Comportamiento en dispositivos móviles

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

5. Enlaces a imágenes (modo manual)

Si se han configurado enlaces a imágenes en el editor:

• Al hacer clic en una imagen, se accede a la URL configurada.
• Las imágenes que no tienen un enlace no se pueden seleccionar al hacer clic en ellas.
• Las imágenes enlazadas se muestran correctamente tanto en dispositivos móviles como en ordenadores de sobremesa

7. Comprobaciones de accesibilidad

Teclado

• Se puede seleccionar el foco en los controles del carrusel mediante la tecla Tab
• Los botones de flecha se pueden activar con la tecla Intro
• Las flechas del teclado (derecha/izquierda) sirven para controlar el carrusel
• Las imágenes enlazadas se pueden activar con 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 del ámbito: Modo destacado

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

PÁGINA DE OFERTA ÚNICA (bloque añadido al final)

LISTA DE BUCLE DE CONSULTAS (no existe en Figma):