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

    Interface CarouselStrategy

    Strategy that controls how carousel items are laid out and animated when the active index changes.

    Two built-in implementations ship with the library:

    Consumers may implement custom strategies by conforming to this interface.

    interface CarouselStrategy {
        name: string;
        getItemStyle(
            itemIndex: number,
            activeIndex: number,
            totalItems: number,
            wrap?: boolean,
        ): CarouselItemStyle;
        getTrackStyle(): Record<string, string>;
    }

    Implemented by

    Index

    Properties

    name

    Methods

    getItemStyle getTrackStyle

    Properties

    name: string

    Human-readable name (useful for debugging / stories).

    Methods

    • Compute the CSS styles for a single item.

      Parameters

      • itemIndex: number

        — the item's position in the array

      • activeIndex: number

        — the currently centred / active index

      • totalItems: number

        — total number of items

      • Optionalwrap: boolean

      Returns CarouselItemStyle

    • Returns the CSS style object for the track container itself. Strategies may set perspective, overflow, etc.

      Returns Record<string, string>

    Settings

    Member Visibility

    On This Page

    Properties
    Methods