Slideshow

Carrusel de imágenes de ancho completo. Ideal para hero rotativo o galería de productos destacados.

Sección reorderable — se puede posicionar en cualquier lugar de la homepage.

Configuración

Campo	Tipo	Default	Descripción
slides	slides	[]	Array de slides con imagen, título, subtítulo, CTA
autoplay_interval	number	5	Intervalo de autoplay en segundos (3–15)

Estructura de cada slide

Campo	Tipo	Descripción
image	image	URL de la imagen
title	text	Título superpuesto
subtitle	text	Subtítulo
cta_text	text	Texto del botón CTA
cta_url	url	URL del botón CTA

Ejemplo de configuración

{
  "slides": [
    {
      "image": "/uploads/slide1.jpg",
      "title": "Nueva colección de verano",
      "subtitle": "Descubre los últimos estilos",
      "cta_text": "Ver colección",
      "cta_url": "/collections/verano"
    },
    {
      "image": "/uploads/slide2.jpg",
      "title": "Envío gratis",
      "subtitle": "En compras mayores a S/ 200",
      "cta_text": "Comprar ahora",
      "cta_url": "/collections"
    }
  ],
  "autoplay_interval": 5
}

Template

{{ define "sections/slideshow" }}
<div class="slideshow" data-autoplay="{{ .section.autoplay_interval }}">
  {{ range (parseSlides .section.slides) }}
    <div class="slideshow__slide">
      <img src="{{ .Image }}" alt="{{ .Title }}">
      {{ if .Title }}
        <div class="slideshow__overlay">
          <h2>{{ .Title }}</h2>
          <p>{{ .Subtitle }}</p>
          {{ if .CTAText }}
            <a href="{{ .CTAUrl }}">{{ .CTAText }}</a>
          {{ end }}
        </div>
      {{ end }}
    </div>
  {{ end }}
</div>
{{ end }}