Beispiele

Image-Slider

Widget bestellen

📸 Image-Slider in Ninox

So baust du deinen individuell gestalteten Bildwechsler – ganz ohne externe Galerie-Tools.

Du möchtest mehrere Bilder aus einer Tabelle übersichtlich und interaktiv durchblättern? In diesem Beitrag zeigen wir dir Schritt für Schritt, welche Widgets und Ninox-Einstellungen du brauchst – inklusive Beispielcode zur Umsetzung.

🧩 Benötigte Widgets

📁 Aufbau deiner Tabelle

Du brauchst eine Tabelle mit folgenden Feldern:

Feldname	Typ
`Bild`	Dokumenten-/Bild-Feld
`shareUrl`	URL-Feld
`sortId`	Zahlenfeld (zur Sortierung)
`Beschreibung`	Text-Feld
`currentImage`	Hilfsfeld (Text), z. B. im Layout

💡 Tipp: Das Feld currentImage dient der Steuerung des aktuell angezeigten Bilds im Slider.

🛠️ Vorgehensweise

Sobald du die oben genannten Voraussetzungen umgesetzt hast, kannst du mit dem eigentlichen Aufbau des Image-Sliders beginnen.

1. Code einfügen

Der Anwendungscode für den Slider wird in einem Formelfeld (z. B. imageSlider_Layout) platziert. Dieses Feld sorgt für die visuelle Darstellung der Bilder und die Navigation.

2. Wichtige Ninox-Einstellungen

In deiner Bilder-Tabelle solltest du auf folgende Punkte achten:

sortId (Zahlenfeld)
→ Dieses Feld muss für jedes Bild mit einer aufsteigenden Nummer befüllt sein (z. B. 1, 2, 3 …).
→ Es steuert die Reihenfolge, in der die Bilder im Slider angezeigt werden.
shareUrl (URL-Feld)
→ Dieses Feld enthält den direkten Link zur Bilddatei – wichtig für die Anzeige im Custom Image-Widget.
→ Am besten wird dieser Wert automatisch beim Upload eines Bildes gesetzt.

shareUrl automatisch hinterlegen

Um die shareUrl automatisch zu befüllen, kannst du im Bild-Feld einen Trigger nach Änderung hinterlegen. So wird die URL jedes Mal aktualisiert, wenn ein neues Bild hochgeladen wird.

Beispiel-Code für den Trigger nach Änderung:

shareURL := shareFile(Bild)

3. Hilfsfeld erstellen

Lege auf der Tabelle, in der du den Image-Slider darstellen möchtest, ein Textfeld an – z. B. currentImage. Dieses Feld speichert die aktuell angezeigte Bild-ID und wird über die Navigationsbuttons im Slider verändert.

Anwendungscode einfügen

Erstelle nun ein Formelfeld, z. B. imageSlide_Layout, und füge dort den Anwendungscode ein. Achte dabei auf folgende Anpassungen:

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
							}]
					})
			}]
	})

💡 Tipp: embedded-Parameter richtig setzen

Je nachdem, wo du den Image-Slider einsetzen möchtest, musst du den Parameter embedded korrekt setzen:

embedded: false
→ Wenn du den Slider direkt in einem Ninox-Formularfeld (z. B. als eigenes Layout-Feld) nutzt.
→ Der Slider verhält sich wie ein eigenständiges Widget.
embedded: true
→ Wenn du den Slider innerhalb eines anderen Widgets oder in ein größeres Custom Layout einbettest.
→ Der Slider passt sich dann an die umgebende Struktur an.

5. Tabellen- & Feldbezüge setzen

Gleich zu Beginn des Codes müssen deine Variablen korrekt auf deine eigene Bilder-Tabelle und die darin enthaltenen Felder verweisen.

✍️ Was musst du hier anpassen?

Images_Slider → Ersetze diesen Namen durch den tatsächlichen Namen deiner Ninox-Tabelle mit den Bildern.
sortId → Ersetze durch den Namen deines Sortierfelds in dieser Tabelle (z. B. 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));

In den Custom Buttons des Sliders musst du die fieldId des Feldes currentImage angeben, damit die Buttons korrekt funktionieren. Achte darauf, die fieldId in beiden Buttons zu ersetzen:

Button "caret-left"
Button "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. Finaler Schritt: Referenzen anpassen ✅

Setze in den Record-Referenzierungen den Namen deiner Bildertabelle und deines Feldes auf der Zieltabelle ein.

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));

⚠️ Diese Anpassung ist entscheidend, damit die Navigation im Slider korrekt funktioniert.

🚀 Und jetzt: Loslegen!

Wenn du alle Schritte umgesetzt hast, ist dein individuell konfigurierter Image-Slider einsatzbereit.
Egal ob Team-Galerie, Portfolio oder Visual-Highlight – du kannst die Bilder jetzt ganz bequem durchblättern. 🏞️✨