section.hero.carousel

Carrusel inmersivo

Explicar la propuesta y orientar la primera acción.

Ejemplo disponible

ContenidoTemaVistaFamiliaComparar con

Ancho pxAbrir a tamaño real ↗

Carrusel inmersivo1440 px · estudio

Qué cambia

Portada fotográfica con imágenes, índice y controles de reproducción progresivos.

Datos necesarios

Titular; fotografía, entradilla y acciones opcionales.

Disponibilidad

Hábitat

Abrir en el editor ↗Ver demos completas ↗

Verificación

Ejemplo disponible.

Sin resultado de pruebas asociado a esta revisión.

Las pruebas asociadas se enumeran en el detalle técnico. Disponibilidad no equivale a aprobación visual.

Prueba esta experiencia

Abre la vista de la muestra.
Pulsa Imagen siguiente y elige una imagen en el índice.
Usa las flechas del teclado y Pausar carrusel.
Activa movimiento reducido y revisa los estados mínimo y sin imagen.

Resultado observable: Imagen e índice permanecen sincronizados; la pausa detiene la reproducción y sin imágenes no aparecen controles inservibles.

Reiniciar el editor crea otra sesión con la muestra original. Solo Guardar y Conflicto usan borradores de la API.

Detalle técnico · origen, JSON y pruebas

section.hero.carousel · packages/blocks/src/catalog.ts

tools/e2e/habitat.spec.ts
tools/contracts/habitat.test.tsx
tools/contracts/laboratory.test.ts
tools/e2e/layout.spec.ts
tools/e2e/laboratory.spec.ts

{
  "schemaVersion": 1,
  "id": "lab-section-hero-carousel",
  "name": "Taller Norte · Prueba",
  "disclosure": "Demostración ficticia · datos y fotografías de prueba",
  "templateId": "estudio",
  "theme": {
    "schemaVersion": 1,
    "preset": "estudio",
    "identityMode": "family",
    "sectionRhythm": "alternating",
    "overrides": {}
  },
  "nav": [],
  "seo": {
    "title": "Taller Norte · Prueba — Carpintería a medida",
    "description": "Carpintería a medida. Trabajamos con particulares y empresas, sobre todo en Madrid. Cuéntanos qué necesitas y pide presupuesto."
  },
  "modules": [],
  "assets": [
    {
      "id": "showcase",
      "url": "/sandbox/showcase.jpg",
      "alt": "Taller con un mueble en fabricación (imagen de prueba)"
    },
    {
      "id": "local",
      "url": "/sandbox/local.jpg",
      "alt": "Entrada del taller (imagen de prueba)"
    },
    {
      "id": "work-1",
      "url": "/sandbox/work-1.jpg",
      "alt": "Mesa de roble terminada (imagen de prueba)"
    },
    {
      "id": "work-2",
      "url": "/sandbox/work-2.jpg",
      "alt": "Armario empotrado instalado (imagen de prueba)"
    },
    {
      "id": "work-3",
      "url": "/sandbox/work-3.jpg",
      "alt": "Silla restaurada (imagen de prueba)"
    }
  ],
  "pages": [
    {
      "schemaVersion": 1,
      "slug": "",
      "title": "Taller Norte · Prueba",
      "layout": "stack",
      "blocks": [
        {
          "schemaVersion": 1,
          "id": "hero",
          "section": {
            "bg": "base",
            "bleed": false,
            "overlap": "none",
            "spacing": "regular",
            "align": "start",
            "decor": "none",
            "corner": "none"
          },
          "type": "hero",
          "variant": "carousel",
          "props": {
            "eyebrow": "Carpintería a medida · Madrid",
            "title": "Tu próximo proyecto",
            "highlight": "en Madrid",
            "text": "Descripción del servicio.",
            "image": "showcase",
            "cta": {
              "label": "Escríbenos por WhatsApp",
              "href": "https://wa.me/34600000000"
            },
            "secondaryCta": {
              "label": "Pide presupuesto",
              "href": "/"
            },
            "facts": [
              "Desde 1998",
              "Para particulares y empresas"
            ],
            "slides": [
              {
                "title": "Vivienda 1",
                "image": "work-1",
                "location": "Lugar de demostración",
                "cta": {
                  "label": "Ver vivienda",
                  "href": "/"
                }
              },
              {
                "title": "Vivienda 2",
                "image": "work-2",
                "location": "Lugar de demostración",
                "cta": {
                  "label": "Ver vivienda",
                  "href": "/"
                }
              },
              {
                "title": "Vivienda 3",
                "image": "work-3",
                "location": "Lugar de demostración",
                "cta": {
                  "label": "Ver vivienda",
                  "href": "/"
                }
              }
            ]
          }
        }
      ]
    }
  ]
}