Slider

Carrusel que agrupa varios content assets como diapositivas. Cada slide es un content asset independiente referenciado por su ID: el slider lo renderiza en secuencia con la temporización y transición configuradas.

---

Vista previa

Sin imagen disponible aún. Añade una captura en ./img/slider.jpg y descomenta la línea siguiente.

---

Comportamiento

• Los slides se reproducen en el orden en que aparecen en el array items.
• El slider avanza automáticamente cada time_between_slides milisegundos.
• La transición entre slides dura speed_transition milisegundos.
• Si nav.visible: true, se muestran los controles de navegación (puntos o flechas). Su color se controla con nav.color.
• Si nav.color está vacío, se aplica el color por defecto del componente.

---

Configuración

El JSON se introduce en el cuerpo del content asset en Business Manager → Content Assets.

{
  "time_between_slides": 6000,
  "speed_transition": 500,
  "nav": {
    "visible": true,
    "color": "#ffffff"
  },
  "items": [
    "home-slide-verano-2025",
    "home-slide-polarizadas",
    "home-slide-outlet"
  ]
}

---

Propiedades

Propiedad	Tipo	Obligatorio	Descripción
time_between_slides	number	Sí	Tiempo en milisegundos que permanece visible cada slide antes de avanzar al siguiente.
speed_transition	number	Sí	Duración en milisegundos de la animación de transición entre slides.
nav.visible	boolean	Sí	Si true, muestra los controles de navegación del carrusel.
nav.color	string	No	Color en formato hexadecimal para los controles de navegación. Si está vacío, usa el color por defecto.
items	array	Sí	Lista de IDs de content assets que se renderizan como slides, en el orden indicado.

---

Notas y consejos

Fichero de plantilla

content/slider.isml

Tiempos en milisegundos

Tanto time_between_slides como speed_transition se expresan en milisegundos:

Valor	Equivalencia
1000	1 segundo
3000	3 segundos
6000	6 segundos

Una combinación habitual es time_between_slides: 6000 con speed_transition: 500 (6 s entre slides, 0,5 s de transición).

Cada slide es un content asset independiente

items contiene IDs de content assets, no JSONs inline. Puedes reutilizar el mismo slide en varios sliders simplemente referenciando su ID. El contenido de cada slide se configura en su propio content asset (ej. ctaBannerDoped, ctaBannerDouble, etc.).

Color de navegación en formato hexadecimal

"nav": {
  "visible": true,
  "color": "#ffffff"
}

Usa blanco (#ffffff) para fondos oscuros y negro (#000000) para fondos claros.

Formato de fechas en content assets con countdown

Si alguno de los slides contiene un contador regresivo (countdown), la fecha límite debe introducirse en el siguiente formato:

Jan 01, 2025 09:30:00