Carrusel de imágenes

Una serie de slides, cada uno con imagen y, opcionalmente, texto y enlace. El panel permite hasta 18 slides por carrusel.

En la tienda, el widget de Sectionfy los muestra como un carrusel continuo en dos filas que se desplaza solo (la fila de arriba hacia la izquierda y la de abajo hacia la derecha) y se detiene al pasar el mouse, al enfocar con el teclado, al tocar o mientras se reproduce un video. Con 9 slides o menos usa una sola fila; con más, los reparte en dos filas equilibradas. Si la persona tiene activada la preferencia «reducir movimiento», no se anima: las filas quedan quietas y se recorren con scroll horizontal. Si armas tu propio render con esta API, nada de eso es obligatorio: tú decides cómo mostrar los slides.

En el panel	`tipo` en el JSON	Token de la clave
Carrusel de imágenes	`IMAGE_CAROUSEL`	`image_carousel`

Shape

{
  tipo: 'IMAGE_CAROUSEL';
  titulo: string | null;
  items: Array<{
    imagen: { url: string; alt: string | null }; // requerida, NO nullable
    texto: string | null;
    enlace: {
      url: string;
      etiqueta: string | null;
      nueva_pestana: boolean;
    } | null;
    orden: number;
  }>;
}

Ejemplo

{
  "image_carousel-home-general-cmr2d7fkq0009xt4mn8vz3bq1": {
    "tipo": "IMAGE_CAROUSEL",
    "titulo": "Nuestra colección",
    "items": [
      {
        "imagen": {
          "url": "https://cdn.example.com/slide-1.jpg",
          "alt": "Campera de jean sobre fondo claro"
        },
        "texto": "Denim de temporada",
        "enlace": {
          "url": "https://mitienda.com/categorias/denim",
          "etiqueta": "Ver todo",
          "nueva_pestana": false
        },
        "orden": 0
      },
      {
        "imagen": { "url": "https://cdn.example.com/slide-2.jpg", "alt": null },
        "texto": null,
        "enlace": null,
        "orden": 1
      }
    ],
    "estado": { "lifecycle": "active", "storefrontVisible": true },
    "orden": 2
  }
}

El segundo slide muestra el caso mínimo: solo imagen, sin texto ni enlace.

Renderizar

Lo específico del tipo es el enlace opcional que envuelve la imagen:

function renderSlide(item) {
  const img = `<img src="${item.imagen.url}"
                    alt="${escapar(item.imagen.alt ?? '')}" loading="lazy">`;

  const contenido = item.enlace
    ? `<a href="${item.enlace.url}"
          ${item.enlace.nueva_pestana ? 'target="_blank" rel="noopener"' : ''}>
         ${img}
         ${item.enlace.etiqueta ? `<span>${escapar(item.enlace.etiqueta)}</span>` : ''}
       </a>`
    : img;

  return `<li class="sectionfy-slide">
            ${contenido}
            ${item.texto ? `<p>${escapar(item.texto)}</p>` : ''}
          </li>`;
}

Notas

nueva_pestana es un booleano, no un string. Cuando es true, acompaña el target="_blank" con rel="noopener". Hoy el panel siempre lo envía en false: los enlaces de carrusel se abren en la misma pestaña.
enlace.etiqueta puede ser null aunque haya enlace: el enlace existe pero no tiene texto propio. Envuelve la imagen y listo.
imagen.alt y texto traen la misma descripción que el comerciante escribió para el slide. Si no escribió ninguna, ambos son null — no son campos distintos que puedan divergir.
enlace.url es una ruta interna o una URL HTTPS absoluta. El panel rechaza cualquier otro esquema al guardar, así que puedes usarlo tal cual en el href. Una ruta interna empieza con / (nunca con //) y es relativa al dominio de la tienda.
texto, imagen.alt y enlace son aditivos: un slide sin descripción ni enlace los trae en null y el resto del shape (imagen.url, orden) no cambia.
Máximo 18 slides por carrusel: es el tope que aplica el panel al agregar slides (9 por fila × 2 filas del widget). La API no impone relación de aspecto ni un mínimo; si tu diseño necesita uno, valídalo en el tema. El widget recorta cada imagen para llenar su tarjeta.