Carousel | Neural UI v2

Uso

Proporciona items y renderiza cada elemento con neuCarouselItem. numVisible define la cantidad visible y numScroll el avance por página. responsiveOptions cambia estas cantidades por debajo de cada breakpoint. Usa page para controlar la página desde 0, o no lo asignes y elige initialPage para la navegación interna. circular enlaza los extremos. autoplayInterval se mide en milisegundos; 0 lo desactiva. La reproducción puede pausarse y respeta la preferencia de movimiento reducido.

Ejemplos

Prueba la interacción y abre Código para ver la implementación completa.

Luz de costa

Un horizonte tranquilo en azul.

Página aplicada: 1 · pageChange: 0

Prueba y configura

Cambia las opciones, prueba el resultado y consulta el template actualizado. Código contiene el ejemplo ejecutable completo.

Luz de costa

Un horizonte tranquilo en azul.

Página aplicada: 1 · pageChange: 0

Opciones avanzadas · 7

Template generado con tus opciones actuales. Abre Código para consultar el ejemplo completo.

<neu-carousel
  [items]="collections"
  [page]="page()"
  [numVisible]="1"
  [numScroll]="1"
  orientation="horizontal"
  [responsiveOptions]="responsiveOptions"
  [circular]="false"
  [autoplayInterval]="0"
  [showNavigators]="true"
  [showIndicators]="true"
  ariaLabel="Colecciones destacadas"
  (pageChange)="page.set($event.page)"
  [emptyLabel]="'No hay colecciones'"
  [indicatorLabel]="'Páginas de colecciones'"
  [nextLabel]="'Colección siguiente'"
  [previousLabel]="'Colección anterior'"
>
  <ng-template neuCarouselItem let-item>
    <neu-card [bordered]="true" [flat]="true" padding="md">
      <img [src]="item.src" [alt]="item.title" />
      <h3>{{ item.title }}</h3>
      <p>{{ item.description }}</p>
    </neu-card>
  </ng-template>
</neu-carousel>

Estado y datos de esta configuración

Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.

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

export const collections = [
  {
    "id": "coast",
    "title": "Luz de costa",
    "description": "Un horizonte tranquilo en azul.",
    "src": "assets/media/coast.svg"
  },
  {
    "id": "forest",
    "title": "Paseo por el bosque",
    "description": "Capas de verde y luz suave.",
    "src": "assets/media/forest.svg"
  },
  {
    "id": "desert",
    "title": "Formas del desierto",
    "description": "Arena cálida y colinas lejanas.",
    "src": "assets/media/desert.svg"
  },
  {
    "id": "night",
    "title": "Cielo nocturno",
    "description": "Estrellas sobre una cordillera.",
    "src": "assets/media/night.svg"
  }
];

export const page = signal(0);

export const responsiveOptions = [
  {
    "breakpoint": 640,
    "numVisible": 1,
    "numScroll": 1
  }
];

Inputs de datos, callbacks y configuración estructurada

Datos y contenido

Acepta pageChange actualizando page. El evento incluye page y first, el índice del primer elemento visible. Core no modifica la colección. Usa identidades estables con trackBy. Los Templates de cabecera y pie permanecen fuera del área paginada.

Accesibilidad y teclado

Nombra la región y traduce previousLabel, nextLabel, indicatorLabel y emptyLabel. Las flechas, Inicio y Fin cambian de página cuando el foco no está en los controles proyectados. Izquierda/derecha siguen la dirección del texto; la orientación vertical usa arriba/abajo. Proporciona alternativas útiles para las imágenes y acceso por teclado al contenido interactivo.

Tecla	Acción
`Tab`	Recorre los controles de navegación y el contenido proyectado enfocable.
`ArrowLeft / ArrowRight`	En orientación horizontal, cambia de página según la dirección del texto, fuera de los controles proyectados.
`ArrowUp / ArrowDown`	En orientación vertical, cambia de página fuera de los controles proyectados.
`Home`	Va a la primera página.
`End`	Va a la última página.
`Enter`	Activa el botón enfocado de navegación o indicador de página.
`Space`	Activa el botón enfocado de navegación o indicador de página.

API

Inputs y Outputs corresponden al paquete instalado. Los tipos con nombre enlazan a sus definiciones. Cada Template disponible tiene un ejemplo con Demo y Código.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`ariaLabel`	`string`	`'Carousel'`	`[ariaLabel]`	Etiqueta de región del componente. Tradúcela para tu aplicación.
`autoplayInterval`	`number`	`0`	`[autoplayInterval]`	Espera en milisegundos para reproducción automática; 0 la desactiva.
`circular`	`boolean`	`false`	`[circular]`	Enlaza la navegación entre la primera y la última página.
`emptyLabel`	`string`	`'No items'`	`[emptyLabel]`	Etiqueta de colección vacía. Tradúcela para tu aplicación.
`indicatorLabel`	`string`	`'Carousel pages'`	`[indicatorLabel]`	Etiqueta de indicadores de página. Tradúcela para tu aplicación.
`initialPage`	`number`	`0`	`[initialPage]`	Página inicial desde 0 para navegación no controlada.
`items`	`readonly T[]`	`[]`	`[items]`	Colección de solo lectura; renderiza objetos con neuCarouselItem.
`nextLabel`	`string`	`'Next items'`	`[nextLabel]`	Etiqueta de navegación siguiente. Tradúcela para tu aplicación.
`numScroll`	`number`	`1`	`[numScroll]`	Avance positivo entre páginas consecutivas.
`numVisible`	`number`	`1`	`[numVisible]`	Cantidad positiva de elementos visibles por página.
`orientation`	`"horizontal" \| "vertical"`	`'horizontal'`	`[orientation]`	Organiza y navega el contenido horizontal o verticalmente.
`page`	`number \| null`	`null`	`[page]`	Página aplicada desde 0; null utiliza el estado interno.
`previousLabel`	`string`	`'Previous items'`	`[previousLabel]`	Etiqueta de navegación anterior. Tradúcela para tu aplicación.
`responsiveOptions`	`readonly NeuCarouselResponsiveOption[]`	`[]`	`[responsiveOptions]`	Cambios de numVisible y numScroll por breakpoint.
`showIndicators`	`boolean`	`true`	`[showIndicators]`	Muestra los botones indicadores de página.
`showNavigators`	`boolean`	`true`	`[showNavigators]`	Muestra los controles anterior y siguiente.
`trackBy`	`(index: number, item: T) => unknown`	`(index) => index`Valor derivado	`[trackBy]`	Función de identidad estable que recibe el índice absoluto y el elemento.
`verticalViewPortHeight`	`string`	`'20rem'`	`[verticalViewPortHeight]`	Altura CSS del área en orientación vertical.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Nombre	Valor emitido	Uso en el template	Descripción
`pageChange`	`NeuCarouselPageEvent`	`(pageChange)="onPageChange($event)"`	Página propuesta y el índice de su primer elemento visible.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Nombre	Mecanismo	Contrato
`NeuCarouselFooterDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuCarouselFooter]`
`NeuCarouselHeaderDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuCarouselHeader]`
`NeuCarouselItemDirective`Ver ejemplo	Directiva pública de template	`ng-template[neuCarouselItem]`

NeuCarouselFooterDirectiveVer ejemplo

Directiva pública de template

ng-template[neuCarouselFooter]

Declaración

Contexto completo

NeuCarouselHeaderDirectiveVer ejemplo

Directiva pública de template

ng-template[neuCarouselHeader]

Declaración

Contexto completo

NeuCarouselItemDirectiveVer ejemplo

Directiva pública de template

ng-template[neuCarouselItem]

Declaración

import { NeuCarouselItemDirective } from '@neural-ui/core/carousel';

// Declaración pública (solo referencia)
export declare class NeuCarouselItemDirective<T = unknown> {
}

Contexto completo

import type { NeuCarouselItemContext } from '@neural-ui/core/carousel';

import { NeuCarouselItemDirective } from '@neural-ui/core/carousel';

// Declaración pública (solo referencia)
readonly templateRef: TemplateRef<NeuCarouselItemContext<T>>;

Cada ejemplo muestra un template diferente. Alterna entre Demo y Código para consultar su implementación, imports y estado.

Cabecera

NeuCarouselHeaderDirective

Descubre la colección

La cabecera permanece fuera de los elementos que cambian.

Luz de costa

Un horizonte tranquilo en azul.

Página aplicada: 1 · pageChange: 0

Contenido del elemento

NeuCarouselItemDirective

Luz de costa

Un horizonte tranquilo en azul.

Elemento 1

Página aplicada: 1 · pageChange: 0

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

NeuCarouselItemContextTypeScript

import type { NeuCarouselItemContext } from '@neural-ui/core/carousel';

// Declaración pública (solo referencia)
export interface NeuCarouselItemContext<T> {
  $implicit: T;
  index: number;
}

NeuCarouselPageEventTypeScript

import type { NeuCarouselPageEvent } from '@neural-ui/core/carousel';

// Declaración pública (solo referencia)
export interface NeuCarouselPageEvent {
  first: number;
  page: number;
}

NeuCarouselResponsiveOptionTypeScript

import type { NeuCarouselResponsiveOption } from '@neural-ui/core/carousel';

// Declaración pública (solo referencia)
export interface NeuCarouselResponsiveOption {
  breakpoint: string | number;
  numScroll?: number;
  numVisible: number;
}

Estilos y tokens

Personaliza los tokens públicos disponibles y comprueba ambos temas. Las ilustraciones y el estado de los ejemplos no son Inputs de Core.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-border`	Bordes normales de controles y celdas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.08)`
`--neu-focus-ring`	Anillo normal del foco de teclado	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-primary`	Color de marca en controles activos y énfasis	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#007aff`
`--neu-surface`	Superficie principal del campo, cabecera o control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#ffffff`
`--neu-text`	Color del texto principal y de los iconos que lo heredan	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#0f172a`
`--neu-space-2`	Separación entre contenido y controles	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`0.5rem`
`--neu-space-3`	Separación entre contenido y controles	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`0.75rem`
`--neu-transition`	Duración de los cambios de estado	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`200ms ease`

Componentes relacionados

Utiliza los componentes relacionados para completar tu interfaz.

Luz de costa

Luz de costa

Inputs

Outputs

Templates

Cabecera

Descubre la colección

Luz de costa

Contenido del elemento

Luz de costa

Pie

Luz de costa

Public Types

Tokens específicos

Tokens compartidos utilizados