@furystack/shades-common-components/esm/components/carousel.d.ts

Common UI components for FuryStack Shades

import type { PartialElement } from '@furystack/shades';
/**
 * Props for the Carousel component.
 */
export type CarouselProps = PartialElement<HTMLElement> & {
    /** Array of slide content elements */
    slides: JSX.Element[];
    /** Whether to auto-advance slides. Defaults to false */
    autoplay?: boolean;
    /** Interval between auto-advance in milliseconds. Defaults to 3000 */
    autoplayInterval?: number;
    /** Whether to show dot indicators. Defaults to true */
    dots?: boolean;
    /** Transition effect between slides. Defaults to 'slide' */
    effect?: 'slide' | 'fade';
    /** Whether the carousel scrolls vertically. Defaults to false */
    vertical?: boolean;
    /** Index of the initially active slide. Defaults to 0 */
    defaultActiveIndex?: number;
    /** Callback fired when the active slide changes */
    onChange?: (index: number) => void;
};
/**
 * A carousel/slider component for cycling through a series of content.
 * Supports autoplay, dot indicators, slide/fade transitions, vertical orientation,
 * keyboard navigation, and swipe gestures.
 */
export declare const Carousel: (props: Omit<Partial<HTMLElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
} & {
    /** Array of slide content elements */
    slides: JSX.Element[];
    /** Whether to auto-advance slides. Defaults to false */
    autoplay?: boolean;
    /** Interval between auto-advance in milliseconds. Defaults to 3000 */
    autoplayInterval?: number;
    /** Whether to show dot indicators. Defaults to true */
    dots?: boolean;
    /** Transition effect between slides. Defaults to 'slide' */
    effect?: "slide" | "fade";
    /** Whether the carousel scrolls vertically. Defaults to false */
    vertical?: boolean;
    /** Index of the initially active slide. Defaults to 0 */
    defaultActiveIndex?: number;
    /** Callback fired when the active slide changes */
    onChange?: (index: number) => void;
}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
//# sourceMappingURL=carousel.d.ts.map