Developer Kit · Examples
Image Slider
Image Slider
📸 Image Slider en Ninox
Así construyes tu propio carrusel de imágenes con diseño personalizado, sin herramientas de galería externas.
¿Quieres recorrer varias imágenes de una tabla de forma clara e interactiva? En este artículo te mostramos paso a paso qué widgets y ajustes de Ninox necesitas, incluyendo el código de ejemplo para implementarlo.
🧩 Widgets necesarios
- <a href="/documentation/custom-layout">Custom Layout</a>
- <a href="/documentation/images">Custom Image</a>
- <a href="/documentation/text">Custom Text</a>
- <a href="/documentation/buttons">Button</a>
📁 Estructura de tu tabla
Necesitas una tabla con los siguientes campos:
<figure><table><tbody><tr><th>Nombre del campo
</th><th>Tipo
</th></tr><tr><td>Bild
</td><td>Campo de documento/imagen
</td></tr><tr><td>shareUrl
</td><td>Campo URL
</td></tr><tr><td>sortId
</td><td>Campo numérico (para ordenar)
</td></tr><tr><td>Beschreibung
</td><td>Campo de texto
</td></tr><tr><td>currentImage
</td><td>Campo auxiliar (texto), p. ej. en el layout
</td></tr></tbody></table></figure>💡 Consejo: El campo currentImage sirve para controlar la imagen actualmente mostrada en el slider.
🛠️ Procedimiento
En cuanto hayas implementado los requisitos anteriores, puedes empezar con la construcción propiamente dicha del Image Slider.
1. Insertar el código
El código de aplicación del slider se coloca en un campo de función (p. ej. imageSlider_Layout). Este campo se encarga de la presentación visual de las imágenes y de la navegación.
2. Ajustes de Ninox importantes
En tu tabla de imágenes debes tener en cuenta lo siguiente:
sortId(campo numérico)shareUrl(campo URL)
Establecer shareUrl automáticamente
Para rellenar shareUrl automáticamente, puedes colocar un trigger tras cambio en el campo de imagen. Así la URL se actualiza cada vez que se sube una nueva imagen. Código de ejemplo para el trigger tras cambio:
shareURL := shareFile(Bild)
3. Crear el campo auxiliar
Crea en la tabla en la que quieres mostrar el Image Slider un campo de texto, p. ej. currentImage. Este campo guarda el ID de la imagen mostrada actualmente y se modifica mediante los botones de navegación del slider.
<li data-preset-tag="h3">### Insertar el código de aplicación
</li> Crea ahora un campo de función, p. ej. imageSlide_Layout, e inserta ahí el código de aplicación. Ten en cuenta los siguientes ajustes:
let current := this;
let nextImage := number(first(Images_Slider[sortId > record(Images_Slider,number(current.currentImage)).sortId] order by sortId).Nr);
let previousImage := number(last(Images_Slider[sortId < record(Images_Slider,number(current.currentImage)).sortId] order by sortId).Nr);
let firstImage := number(first(Images_Slider order by sortId));
let lastImage := number(last(Images_Slider order by sortId));
arcCustomLayout({
uniqueId: "fullLayout_Image-Slider_" + Nr,
embedded: false,
fullscreen: false,
direction: "horizontal",
alignX: "center",
alignY: "center",
width: "",
height: "auto",
gap: "",
backgroundColor: "",
paddingY: "",
paddingX: "30px",
blocks: [{
width: "",
height: "auto",
lineHeight: "",
alignX: "center",
color: "",
styles: "",
value: arcCustomButton({
uniqueId: "leftButton " + Nr,
title: "",
width: "",
height: "",
alignY: "",
alignX: "",
icon: arcCustomIcon({
name: "caret-left",
color: "#9ba3af",
iconSize: "80px"
}),
fontSize: "",
fontColor: "",
backgroundColor: "transparent",
borderColor: "transparent",
borderRadius: "",
actions: [{
recordId: Nr,
type: "update",
field: "X",
value: if previousImage then previousImage else lastImage end
}]
})
}, {
width: "auto",
height: "auto",
lineHeight: "",
alignX: "center",
color: "",
value: arcCustomLayout({
uniqueId: "Image und Description " + Nr,
embedded: true,
fullscreen: false,
direction: "vertical",
alignX: "center",
alignY: "center",
width: "",
height: "",
gap: "20px",
backgroundColor: "",
paddingY: "",
paddingX: "",
blocks: [{
width: "",
height: "auto",
lineHeight: "",
alignX: "center",
color: "",
styles: "",
value: arcCustomText({
uniqueId: "Headline " + Nr,
embedded: true,
width: "",
height: "",
alignY: "",
alignX: "center",
fontSize: "20px",
fontWeight: "",
fontColor: "",
lineHeight: "",
textWrap: "",
textScroll: "",
textAlign: "",
textDirection: "horizontal",
textDecoration: {
type: "",
style: "",
color: "",
thickness: ""
},
value: record(Images_Slider,number(currentImage)).Bezeichnung
})
}, {
width: "",
height: "auto",
lineHeight: "",
alignX: "center",
color: "",
value: arcCustomImage({
uniqueId: "Image " + Nr,
title: "",
width: "400px",
height: "400px",
backgroundSize: "cover",
backgroundColor: "",
style: "",
radius: "5px",
borderColor: "",
link: record(Images_Slider,number(currentImage)).shareURL
})
}]
})
}, {
width: "",
height: "100% ",
lineHeight: "",
alignX: "center",
color: "",
value: arcCustomButton({
uniqueId: "leftButton " + Nr,
title: "",
width: "",
height: "",
alignY: "",
alignX: "",
icon: arcCustomIcon({
name: "caret-right",
color: "#9ba3af",
iconSize: "80px"
}),
fontSize: "",
fontColor: "",
backgroundColor: "transparent",
borderColor: "transparent",
borderRadius: "",
actions: [{
recordId: Nr,
type: "update",
field: "X",
value: if nextImage then nextImage else firstImage end
}]
})
}]
})💡 Consejo: configura correctamente el parámetro embedded
Según dónde quieras usar el Image Slider, debes configurar correctamente el parámetro embedded:
embedded: falseembedded: true
5. Establecer referencias de tabla y campo
Justo al principio del código, tus variables deben apuntar correctamente a tu propia tabla de imágenes y a los campos que contiene.
✍️ ¿Qué debes adaptar aquí?
Images_Slider→ Sustituye este nombre por el nombre real de tu tabla de Ninox con las imágenes.sortId→ Sustitúyelo por el nombre de tu campo de ordenación en esa tabla (p. ej.Reihenfolge).
let nextImage := number(first(Images_Slider[sortId > record(Images_Slider,number(current.currentImage)).sortId] order by sortId).Nr);
let previousImage := number(last(Images_Slider[sortId < record(Images_Slider,number(current.currentImage)).sortId] order by sortId).Nr);
let firstImage := number(first(Images_Slider order by sortId));
let lastImage := number(last(Images_Slider order by sortId));En los Custom Buttons del slider debes indicar la fieldId del campo currentImage para que los botones funcionen correctamente. Ten en cuenta sustituir la fieldId en ambos botones:
- Botón
"caret-left" - Botón
"caret-right"
value: arcCustomButton({
uniqueId: "leftButton " + Nr,
title: "",
width: "",
height: "",
alignY: "",
alignX: "",
icon: arcCustomIcon({
name: "caret-left",
color: "#9ba3af",
iconSize: "80px"
}),
fontSize: "",
fontColor: "",
backgroundColor: "transparent",
borderColor: "transparent",
borderRadius: "",
actions: [{
recordId: Nr,
type: "update",
field: "X",
value: if previousImage then previousImage else lastImage end
}]
})6. Paso final: ajustar referencias ✅
Coloca en las referencias de registro el nombre de tu tabla de imágenes y de tu campo en la tabla de destino.
⚠️ Este ajuste es decisivo para que la navegación del slider funcione correctamente.
🚀 ¡Y ahora, adelante!
Cuando hayas implementado todos los pasos, tu Image Slider configurado a tu medida ya está listo. Ya sea galería de equipo, portafolio o destacado visual, ahora puedes recorrer las imágenes con toda comodidad. 🏞️✨