---
title: "Custom Slideshow"
slug: "custom-slideshow"
category: "Widgets"
reactComponent: "ArcWidgetSlideshow"
reactTier: "premium"
reactSince: "0.1.0-alpha.5"
reactExample: "slideshow.tsx"
locale: "es"
hosts: "ninox"
---

# Custom Slideshow

## AI Defaults (read first)

- **Function name**: `arcCustomSlideshow`.
- **items**: Required array – each item needs at least `value` (Text, HTML-String, or `<image ...>`-HTML). Without `items` the slideshow renders empty.
- **width / height**: Default `"100%"` / `"300px"` – set explicitly when not embedded.
- **embedded**: Default `false`. Set `true` when nesting inside `arcCustomLayout` etc. – the slideshow then fills `100%`/`100%` of its parent instead of using `width`/`height`.
- **direction**: `"horizontal"` (default) or `"vertical"` – controls both the slide track and swipe/drag direction.
- **loop**: Default `true` – set `false` to stop at the first/last slide.
- **autoplay**: Default `{ enabled: false, speed: 3000 }` – only starts if `enabled: true`.
- **Not yet wired up**: `controls.enabled`, `indicators.type`, `indicators.position`, top-level `scroll`, and `pause.scroll` / `pause.click` / `pause.touch` are accepted in `data` but currently have **no effect** – nav arrows and dot indicators are always shown, dots are always at the bottom (horizontal) / right (vertical). Only `pause.hover` and `pause.focus` actually pause autoplay. Don't rely on these for a client build without re-checking the code.
- **uniqueId**: Not required by this widget (unlike most others) – the container `id` passed by the adapter is used directly.

# 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

```javascript
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%`).

```javascript
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).

```javascript
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.

```javascript
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 }`

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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>

```javascript
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 [`arcCustomSlider`](/documentation/custom-slider) — es un widget independiente y no tiene relación con la slideshow de imágenes/contenido.