Carousel | Neural Native

Importación

component.ts

import { NeuCarouselComponent } from '@neural-ui/native/carousel';

Ejemplos

Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.

Un momento al aire libre

Recorre la colección deslizando o toca una imagen para abrir el visor. La reproducción automática se pausa mientras el visor está abierto.

Ver y copiar el ejemplo completo

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuSwitchComponent } from '@neural-ui/native/switch';
import { NeuCarouselComponent } from '@neural-ui/native/carousel';
import { View, Text, ScrollView } from '@ng-native/components';
import type { NeuImageItem } from '@neural-ui/native';

@Component({
  selector: 'app-example',
  imports: [NeuSwitchComponent, NeuCarouselComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="false"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Un momento al aire libre</text><text class="product-caption">Estudios de paisaje · Colección Neural</text></view>
    <neu-carousel [viewerLabels]="{ label: 'Visor de imágenes', closeLabel: 'Cerrar visor', previousLabel: 'Imagen anterior', nextLabel: 'Imagen siguiente', zoomLabel: 'Ampliar imagen', zoomOutLabel: 'Reducir imagen', errorLabel: 'No se ha podido cargar la imagen' }" emptyLabel="No hay imágenes" playLabel="Reproducir presentación" pauseLabel="Pausar presentación" nextLabel="Imagen siguiente" previousLabel="Imagen anterior" [items]="images" [(index)]="index" [(open)]="open" [loop]="loop()" [autoplay]="autoplay()" [autoplayInterval]="4000" />
    <view class="product-surface">
      <text class="product-heading">Preferencias de reproducción</text>
      <neu-switch label="Reproducción automática" [(checked)]="autoplay" />
      <neu-switch label="Repetir colección" [(checked)]="loop" />
      <text class="product-caption">Desliza para explorar. Pausa cuando quieras detenerte un poco más.</text>
    </view></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }

  `,
})
export class ExampleComponent {
  readonly images: readonly NeuImageItem[] = [
    {
      "id": "forest",
      "label": "Paseo por el bosque",
      "uri": "/assets/media/v2/forest.png"
    },
    {
      "id": "desert",
      "label": "Formas del desierto",
      "uri": "/assets/media/v2/desert.png"
    },
    {
      "id": "night",
      "label": "Cielo nocturno",
      "uri": "/assets/media/v2/night.png"
    },
    {
      "id": "coast",
      "label": "Horizonte tranquilo",
      "uri": "/assets/media/v2/coast.png"
    }
  ];
  readonly index = signal(0);
  readonly open = signal(false);
  readonly autoplay = signal(false);
  readonly loop = signal(true);
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Carousel · android · native capture — **Android**Captura nativa

Carousel · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
items	readonly NeuImageItem[]	[]	Input	Datos ordenados del componente. Utiliza el contrato siguiente e identificadores estables y únicos.
preview	boolean	true	Input	Abre el visor completo al pulsar una imagen. Activado por defecto. Deslizar cambia de imagen sin abrir el visor. Usa false para una imagen sin acción de apertura.
viewerLabels	NeuImageViewerLabels	{}	Input	Textos opcionales del visor interno: label, closeLabel, previousLabel, nextLabel, zoomLabel, zoomOutLabel y errorLabel. Las etiquetas de anterior y siguiente utilizan las del carrusel si se omiten.
loop	boolean	false	Input	Permite pasar de la última a la primera imagen y viceversa con flechas, deslizamiento o autoplay. No inicia la reproducción automática; activa autoplay para ello.
autoplay	boolean	false	Input	Avanza automáticamente según autoplayInterval y muestra un control de pausa/reproducción. Desactivado por defecto. Se pausa durante la interacción táctil, mientras el visor está abierto y con movimiento reducido. Sin loop se detiene en la última imagen.
autoplayInterval	number	4000	Input	Tiempo entre avances automáticos en milisegundos, 4000 por defecto. Cero o un valor negativo detiene el avance automático. Los valores positivos se limitan a 1000–60000; los no finitos usan 4000. La navegación manual reinicia la espera.
pauseLabel	string	'Pause slideshow'	Input	Nombre accesible del botón para pausar la reproducción; aparece cuando autoplay está activo y hay varias imágenes.
playLabel	string	'Play slideshow'	Input	Nombre accesible del botón que reanuda una reproducción pausada por el usuario. Reinicia la espera sin saltar inmediatamente de imagen.
previousLabel	string	'Previous image'	Input	Texto o nombre accesible utilizado para anterior. No ejecuta la acción por sí solo.
nextLabel	string	'Next image'	Input	Texto o nombre accesible utilizado para siguiente. No ejecuta la acción por sí solo.
emptyLabel	string	'No images'	Input	Texto o nombre accesible utilizado para estado vacío. No ejecuta la acción por sí solo.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
index	number	0	Model · bidireccional	Posición actual de imagen o carrusel, empezando por cero. Enlaza una signal escribible mediante [(index)].
open	boolean	false	Model · bidireccional	Indica si el visor del carrusel está abierto. Comparte el índice actual con el carrusel; la reproducción automática se pausa hasta cerrar el visor.

Outputs

Nombre	Payload	Cuándo se emite
indexChange	number	Emite el valor actualizado de index. [(index)] enlaza este output junto con su input model.
openChange	boolean	Emite el valor actualizado de open. [(open)] enlaza este output junto con su input model.

Estado de los models

Enlaza la signal con [(nombreModel)] sin llamarla. Utiliza nombreModel() para leer su valor.

model-fields.ts

import { signal } from '@angular/core';

// Fields inside your component class
readonly index = signal<number>(0);
readonly open = signal<boolean>(false);

Tipos e interfaces de datos

Utiliza los imports en tu aplicación. Las definiciones siguientes se muestran como referencia.

NeuImageItem

NeuImageItem.ts

import type { NeuImageItem } from '@neural-ui/native';

// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuImageItem {
    readonly id: string;
    readonly uri: string;
    readonly label: string;
}

Campo	Tipo	Requisito	Significado
id	string	Obligatorio	Identificador estable y único para seguimiento y selección.
uri	string	Obligatorio	URI nativa de imagen o archivo.
label	string	Obligatorio	Nombre legible del elemento.

NeuImageViewerLabels

NeuImageViewerLabels.ts

import type { NeuImageViewerLabels } from '@neural-ui/native/image-viewer';

// Public definition for reference only. Import this type; do not redeclare it.
export interface NeuImageViewerLabels {
    readonly label?: string;
    readonly closeLabel?: string;
    readonly previousLabel?: string;
    readonly nextLabel?: string;
    readonly zoomLabel?: string;
    readonly zoomOutLabel?: string;
    readonly errorLabel?: string;
}

Campo	Tipo	Requisito	Significado
label	string	Opcional	Nombre legible del elemento.
closeLabel	string	Opcional	Nombre accesible de la acción de cerrar el visor.
previousLabel	string	Opcional	Nombre accesible de la acción de imagen anterior.
nextLabel	string	Opcional	Nombre accesible de la acción de imagen siguiente.
zoomLabel	string	Opcional	Nombre accesible de la acción de ampliar la imagen.
zoomOutLabel	string	Opcional	Nombre accesible de la acción de reducir la imagen.
errorLabel	string	Opcional	Mensaje anunciado cuando no se puede cargar la imagen.