Premium Widgets

Custom Slideshow

Custom Slideshow

Custom Slideshow

Con arcCustomSlideshow construyes una galería de imágenes / slideshow directamente en Ninox — con gesto de swipe (táctil y drag con ratón), navegación por flechas, indicadores de puntos y autoplay opcional. Es adecuado para galerías de imágenes, vistas previas de producto o simples diapositivas de texto dentro de un dashboard o layout.

Esto puedes controlar:

• Orientación (horizontal / vertical)
• Tamaño, borde, color de fondo del contenedor
• Autoplay (activado/desactivado, velocidad)
• Comportamiento de bucle en los extremos
• Animación de transición (duración, easing)
• Contenido de cada diapositiva individual (texto, HTML, imagen)

Código de aplicación

arcCustomSlideshow({
    embedded: false,
    width: "100%",
    height: "400px",
    backgroundColor: "#f5f5f5",
    borderRadius: "8px",
    borderWidth: "0px",
    borderColor: "transparent",
    direction: "horizontal",
    loop: true,
    autoplay: {
        enabled: true,
        speed: 4000
    },
    pause: {
        hover: true,
        focus: true
    },
    transition: {
        duration: 300,
        transition: "ease-in-out"
    },
    indicators: {
        enabled: true
    },
    items: [{
            value: "<image value=\"" + shareFile(record(Bilder, 1).Bild) + "\">",
            label: "Bild 1"
        }, {
            value: "<image value=\"" + shareFile(record(Bilder, 2).Bild) + "\">",
            label: "Bild 2"
        }, {
            value: "Ein einfacher Text-Slide",
            backgroundColor: "#e3f2fd"
        }]
})

Parámetros

embedded

Tipo: boolean Default: false

Determina si la slideshow se muestra integrada en otro widget (p. ej. arcCustomLayout) o de forma independiente en la interfaz.

• true → La slideshow ocupa el 100% del ancho/alto del contenedor circundante.
• false → La slideshow usa directamente width / height.

width / height

Tipo: text Default: "100%" / "300px"

Ancho y alto de la slideshow cuando embedded: false. Con embedded: true estos valores se ignoran (siempre 100%/100%).

width: "100%",
height: "400px",

backgroundColor / borderRadius / borderWidth / borderColor

Tipo: text Default: "#f5f5f5" / "8px" / "0px" / "transparent"

Estilo del contenedor de la slideshow (no de las diapositivas individuales).

backgroundColor: "#f5f5f5",
borderRadius: "8px",
borderWidth: "1px",
borderColor: "#ddd",

direction

Tipo: text Default: "horizontal"

Define si las diapositivas se disponen horizontalmente (una junto a otra, swipe izquierda/derecha) o verticalmente (una debajo de otra, swipe arriba/abajo). Los botones de flecha y los indicadores de puntos adaptan automáticamente su posición.

direction: "horizontal", // Standard – Pfeile links/rechts
direction: "vertical",   // Pfeile oben/unten

loop

Tipo: boolean Default: true

• true → Tras la última diapositiva se vuelve a la primera (y viceversa).
• false → En la primera/última diapositiva se detiene la navegación (sin wrap-around).

Bloque: autoplay{}

Tipo: object Default: { enabled: false, speed: 3000 }

autoplay: {
    enabled: true,
    speed: 4000 // ms zwischen den Slides
}

Bloque: pause{}

Tipo: object Default: { hover: true, focus: true, scroll: true, click: true, touch: true }

⚠️ Solo hover y focus están implementados actualmente. scroll, click y touch se aceptan, pero (todavía) no pausan el autoplay.

pause: {
    hover: true, // Autoplay pausiert, solange die Maus über der Slideshow ist
    focus: true  // Autoplay pausiert, solange die Slideshow fokussiert ist (z. B. per Tab-Taste)
}

Bloque: transition{}

Tipo: object Default: { duration: 300, delay: 0, transition: "ease-in-out" }

Controla la animación al cambiar entre diapositivas. delay no se evalúa actualmente.

transition: {
    duration: 300,           // ms
    transition: "ease-in-out" // CSS-Timing-Funktion
}

Bloque: indicators{}

Tipo: object Default: { enabled: true, type: "dots", position: "bottom" }

⚠️ Solo enabled tiene efecto actualmente (mostrar/ocultar los puntos). type y position están reservados para futuras ampliaciones.

indicators: {
    enabled: true // false blendet die Punkt-Navigation komplett aus
}

items

Tipo: array of objects Campo obligatorio

Cada entrada describe una diapositiva.

<figure><table><tbody><tr><th>Feld

</th><th>Typ

</th><th>Beschreibung

</th></tr><tr><td>value

</td><td>text

</td><td>Contenido de la diapositiva: texto simple, string HTML (<div>…</div>), o un fragmento HTML <image value="..."> (p. ej. resultado de shareFile()).

</td></tr><tr><td>label

</td><td>text

</td><td>Texto de reserva si value está vacío o no es un string — p. ej. "Slide 1".

</td></tr><tr><td>width / height

</td><td>text

</td><td>Tamaño de la diapositiva individual (Default: 100% / 100%).

</td></tr><tr><td>backgroundColor

</td><td>text

</td><td>Color de fondo individual para esta diapositiva.

</td></tr></tbody></table></figure>

items: [{
    value: "<image value=\"" + shareFile(record(Bilder, 1).Bild) + "\">",
    label: "Bild 1"
}, {
    value: "Nur Text als Slide",
    backgroundColor: "#e3f2fd"
}]

💡 Consejo: Para una galería de imágenes real a partir de una tabla de Ninox, construye items mediante un bucle for sobre tu tabla de imágenes (p. ej. con shareFile() por registro), en lugar de codificar las diapositivas una a una de forma fija.

Widget relacionado

Para un regulador de valores clásico (p. ej. ajustar un porcentaje o valor numérico arrastrando) usa en su lugar <a href="/documentation/custom-slider"><code>arcCustomSlider</code></a> — es un widget independiente y no tiene relación con la slideshow de imágenes/contenido.