Beispiele
Image-Slider
📸 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 |
---|---|
| Dokumenten-/Bild-Feld |
| URL-Feld |
| Zahlenfeld (zur Sortierung) |
| Text-Feld |
| 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 imCustom 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:

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:
💡 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
).
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"
6. Finaler Schritt: Referenzen anpassen ✅
Setze in den Record-Referenzierungen den Namen deiner Bildertabelle und deines Feldes auf der Zieltabelle ein.
⚠️ 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. 🏞️✨