---
title: "Image Slider"
slug: "image-slider"
category: "Ejemplos"
hosts: "ninox"
locale: "es"
reactExampleKind: "recipe"
reactExample: "recipe-gallery.tsx"
---
# 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
- [Custom Layout](/documentation/custom-layout)
- [Custom Image](/documentation/images)
- [Custom Text](/documentation/text)
- [Button](/documentation/buttons)
## 📁 Estructura de tu tabla
Necesitas una tabla con los siguientes campos:
Nombre del campo
Tipo
`Bild`
Campo de documento/imagen
`shareUrl`
Campo URL
`sortId`
Campo numérico (para ordenar)
`Beschreibung`
Campo de texto
`currentImage`
Campo auxiliar (texto), p. ej. en el layout
💡** 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)
→ Este campo debe estar rellenado para cada imagen con un número ascendente (p. ej. 1, 2, 3 …).
→ Controla el orden en el que se muestran las imágenes en el slider.
- `shareUrl` (campo URL)
→ Este campo contiene el enlace directo al archivo de imagen; importante para mostrarlo en el widget `Custom Image`.
→ Lo mejor es que este valor se establezca automáticamente al subir una imagen.
**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:**
```javascript
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.
### Insertar el código de aplicación
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:
```javascript
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: false`
→ Si usas el slider directamente en un campo de formulario de Ninox (p. ej. como campo de layout propio).
→ El slider se comporta como un widget independiente.
- `embedded: true`
→ Si integras el slider dentro de otro widget o en un Custom Layout más grande.
→ El slider se adapta entonces a la estructura circundante.
### 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`).
```javascript
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"`
```javascript
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. 🏞️✨