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

# Slideshow en React

Muestra texto o HTML propio como secuencia de diapositivas. Adecuado para galerías de imágenes sencillas o avisos cambiantes.

Referencia para `@arcrider/arcwidgets-react@0.1.0-alpha.5`. [Instalación](/docs/react/intro/setup-react) · [Todos los componentes](/docs/react/intro/react-components).

## Ejemplo completo

```tsx
import { ArcWidgetSlideshow } from '@arcrider/arcwidgets-react';
import { useState } from 'react';

const lang = document.documentElement.lang.startsWith('en')
  ? 'en'
  : document.documentElement.lang.startsWith('es')
    ? 'es'
    : 'de';
const requested = new URLSearchParams(location.search).get('data');
const pack = requested === 'empty' || requested === 'busy' ? requested : 'demo';
const t = (de: string, en: string, es: string) =>
  lang === 'en' ? en : lang === 'es' ? es : de;

const demoItems = [
  {
    value: `<h2>01 · ${t('Entdecken', 'Discover', 'Descubrir')}</h2><p>${t('Anforderungen und Ziele sammeln.', 'Collect requirements and goals.', 'Reúne requisitos y objetivos.')}</p>`,
    backgroundColor: '#ecfdf5',
  },
  {
    value: `<h2>02 · ${t('Gestalten', 'Design', 'Diseñar')}</h2><p>${t('Ansichten mit Widgets zusammensetzen.', 'Compose views with widgets.', 'Monta vistas con widgets.')}</p>`,
    backgroundColor: '#fffbeb',
  },
  {
    value: `<h2>03 · ${t('Verbinden', 'Connect', 'Conectar')}</h2><p>${t('State und Callbacks an eure API hängen.', 'Wire state and callbacks to your API.', 'Conecta estado y callbacks a tu API.')}</p>`,
    backgroundColor: '#f5f3ff',
  },
];

const busyItems = [
  ...demoItems,
  {
    value: `<h2>04 · ${t('Ausliefern', 'Ship', 'Publicar')}</h2><p>${t('Lizenz setzen und live gehen.', 'Set the license and go live.', 'Activa la licencia y publica.')}</p>`,
    backgroundColor: '#fff1f2',
  },
];

const items = pack === 'empty' ? [] : pack === 'busy' ? busyItems : demoItems;

export default function Example() {
  const [index, setIndex] = useState(0);
  return (
    <>
      <ArcWidgetSlideshow
        data={{
          height: '240px',
          width: '100%',
          items,
          loop: true,
          autoplay: { enabled: false },
          controls: { enabled: true },
          indicators: { enabled: true },
        }}
        onSlideChange={(payload) => setIndex(payload.index)}
      />
      <p aria-live="polite">
        {t('Folie', 'Slide', 'Diapositiva')} {items.length ? index + 1 : 0}
      </p>
    </>
  );
}
```

## Props del componente

### id

ID opcional y estable de la instancia del widget. Sin especificarlo, React genera un ID.

### data

Configuración de tipo `ArcWidgetSlideshowData`. Pasa los cambios como objetos nuevos; gestiona los datos de negocio y la selección en el estado de React.

### onAction

Fallback opcional `(type: string, ...args: unknown[]) => unknown`. El callback concreto tiene prioridad. Detalles: [Estado y eventos](/docs/react/patterns/react-state-events).

### onSlideChange

Índice de base cero de la diapositiva activa.

```typescript
onSlideChange?: (payload: { index: number }) => void;
```

## Configuración

Los siguientes campos pertenecen a `data`. Los tamaños se indican como strings, los números y valores de tiempo según su tipo respectivo.

### items

Entradas de la selección o de la representación; consulta el tipo de datos correspondiente.

Tipo: `ArcWidgetSlideshowItem[]`.

### width

Ancho del widget como valor de tamaño.

Tipo: `string`.

### height

Altura del widget, p. ej. `"320px"`. Los valores porcentuales necesitan un contenedor padre con altura definida.

Tipo: `string`.

### backgroundColor

Color de fondo.

Tipo: `string`.

### borderRadius

Redondeo de las esquinas.

Tipo: `string`.

### borderWidth

Grosor del borde.

Tipo: `string`.

### borderColor

Color del borde.

Tipo: `string`.

### direction

Disposición horizontal o vertical.

Tipo: `'horizontal' | 'vertical' | string`.

### loop

Volver a la primera diapositiva tras la última.

Tipo: `boolean`.

### autoplay

Cambio automático con `enabled` y `speed` en milisegundos.

Tipo: `{ enabled?: boolean; speed?: number; [key: string]: unknown }`.

### pause

Interrupción de la reproducción automática al interactuar.

Tipo: `{ hover?: boolean; focus?: boolean; [key: string]: unknown }`.

### transition

Animación, duración y retardo en milisegundos.

Tipo: `{ duration?: number; delay?: number; transition?: string; [key: string]: unknown }`.

### indicators

Visibilidad y representación de los indicadores de diapositiva.

Tipo: `{ enabled?: boolean; type?: string; position?: string; [key: string]: unknown }`.

### controls

Configuración de la navegación.

Tipo: `{ enabled?: boolean; [key: string]: unknown }`.

### scroll

Cambio mediante scroll.

Tipo: `{ enabled?: boolean; speed?: number; [key: string]: unknown }`.

## Comportamiento y límites

- `items[].value` admite actualmente strings, incluyendo HTML propio. JSX y los descriptores de widget anidados no se renderizan en este componente.

- `autoplay.speed` y `transition.duration` se indican en milisegundos. `onSlideChange` entrega un `index` de base cero.

- El ejemplo de galería usa imágenes SVG generadas por sí mismo. El HTML con contenido dinámico externo debe sanearse antes de pasarlo.

## Tipos de datos

Estos tipos relacionados con el widget se exportan desde el paquete. También están disponibles tipos comunes como `ArcWidgetSlot`, `ArcWidgetStyles` y `ArcReactWidgetProps`. Las firmas de índice permiten extensiones; no garantizan que el widget evalúe campos arbitrarios.

```typescript
export interface ArcWidgetSlideshowItem {
	value: string;
	label?: string;
	width?: string;
	height?: string;
	backgroundColor?: string;
	[key: string]: unknown;
}

export interface ArcWidgetSlideshowData extends ArcWidgetBaseData {
	items: ArcWidgetSlideshowItem[];
	width?: string;
	height?: string;
	backgroundColor?: string;
	borderRadius?: string;
	borderWidth?: string;
	borderColor?: string;
	direction?: 'horizontal' | 'vertical' | string;
	loop?: boolean;
	autoplay?: { enabled?: boolean; speed?: number; [key: string]: unknown };
	pause?: { hover?: boolean; focus?: boolean; [key: string]: unknown };
	transition?: { duration?: number; delay?: number; transition?: string; [key: string]: unknown };
	indicators?: { enabled?: boolean; type?: string; position?: string; [key: string]: unknown };
	controls?: { enabled?: boolean; [key: string]: unknown };
	scroll?: { enabled?: boolean; speed?: number; [key: string]: unknown };
}

export interface ArcWidgetSlideshowProps extends ArcReactWidgetProps<ArcWidgetSlideshowData> {
	onSlideChange?: (payload: { index: number }) => void;
}
```