@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Class UICarousel<T>

    A generic carousel that delegates layout and animation to a pluggable CarouselStrategy.

    Supply a data array via [items] and a projected <ng-template> that receives a CarouselItemContext. Navigation is driven by the two-way [(activeIndex)] model, or via the built-in prev / next buttons.

    Two strategies ship out of the box:

    <ui-carousel [items]="albums" [strategy]="coverflow">
      <ng-template let-album>
        <img [src]="album.cover" [alt]="album.title" />
      </ng-template>
    </ui-carousel>

    Type Parameters

    • T = unknown
    Index

    Constructors

    constructor

    Properties

    activeIndex activeIndexChange ariaLabel disabled hasNext hasPrev items itemStyles itemTemplate showControls showIndicators strategy trackStyle wrap

    Methods

    goTo next prev

    Constructors

    • Type Parameters

      • T = unknown

      Returns UICarousel<T>

    Properties

    activeIndex: ModelSignal<number> = ...

    Zero-based index of the currently active (centred) item.

    activeIndexChange: OutputEmitterRef<number> = ...

    Emitted when the active index changes.

    ariaLabel: InputSignal<string> = ...

    Accessible label for the carousel region.

    disabled: InputSignal<boolean> = ...

    Whether the carousel is disabled.

    hasNext: Signal<boolean> = ...

    Whether the next button should be disabled (never in wrap mode).

    hasPrev: Signal<boolean> = ...

    Whether the prev button should be disabled (never in wrap mode).

    items: InputSignal<readonly T[]> = ...

    Data items to display.

    itemStyles: Signal<CarouselItemStyle[]> = ...

    Per-item styles resolved from the current strategy and active index.

    itemTemplate: Signal<TemplateRef<CarouselItemContext<T>>> = ...

    Projected item template.

    Receives a CarouselItemContext with $implicit (the item), index, and active.

    showControls: InputSignal<boolean> = ...

    Whether to show the previous / next navigation buttons.

    showIndicators: InputSignal<boolean> = ...

    Whether to show dot indicators below the carousel.

    strategy: InputSignal<CarouselStrategy> = ...

    Layout / animation strategy.

    Defaults to CoverflowCarouselStrategy (3D coverflow). Switch to ScrollCarouselStrategy for a simpler horizontal slide.

    trackStyle: Signal<Record<string, string>> = ...

    Track style from the strategy.

    wrap: InputSignal<boolean> = ...

    When true the carousel wraps around: navigating past the last item jumps to the first, and vice-versa.

    Methods

    • Navigate directly to a specific index.

      Parameters

      • index: number

      Returns void

    • Navigate to the next item.

      Returns void

    • Navigate to the previous item.

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Methods