aero-slider/dist/aero-slider.d.ts

A lightweight, CSS-first slider library for the modern web

type SliderAlignment = "left" | "center" | "right";
interface SliderConfig {
    loop?: boolean;
    autoplay?: boolean;
    autoplayInterval?: number;
    draggable?: boolean;
    /** Align the active slide to the left, center, or right when possible. */
    alignment?: SliderAlignment;
    /** Maximum number of pagination dots to show. Beyond this, edge indicators are used. */
    maxDots?: number;
    noDrag?: string;
    perMove?: number;
    direction?: "ltr" | "rtl" | "ttb";
}
interface SliderInstance {
    readonly element: HTMLElement;
    next(): void;
    prev(): void;
    goTo(index: number): void;
    destroy(): void;
    update(config?: SliderConfig): void;
    refresh(): void;
    add(slides: HTMLElement | HTMLElement[], index?: number): void;
    remove(index: number | number[]): void;
    readonly currentIndex: number;
    readonly slideCount: number;
}
type SliderEvent = "ready" | "slideChange" | "dragStart" | "dragEnd" | "autoplayStart" | "autoplayStop" | "destroy" | "resize" | "resized" | "visible" | "hidden";
interface SliderEventMap {
    ready: {};
    slideChange: {
        index: number;
    };
    dragStart: {
        index: number;
    };
    dragEnd: {
        index: number;
        fromIndex: number;
    };
    autoplayStart: {};
    autoplayStop: {};
    destroy: {};
    resize: {};
    resized: {};
    visible: {
        index: number;
    };
    hidden: {
        index: number;
    };
}
type SliderEventData<E extends SliderEvent = SliderEvent> = SliderEventMap[E];
declare global {
    interface HTMLElement {
        aeroSlider?: SliderInstance;
    }
}

declare function createSlider(container: HTMLElement, userConfig?: SliderConfig): SliderInstance;

interface SyncThumbnailsOptions {
    /** Loop mode for the thumbnail slider. Defaults to true for backward compatibility. */
    loop?: boolean;
}
/**
 * Syncs a primary slider with a thumbnail slider. Clicking a thumbnail navigates
 * the primary to that slide. When the primary changes (drag, arrows, etc.), the
 * thumbnail slider scrolls to keep the active thumbnail in view and adds
 * `aero-slider__thumb--active` to the active thumbnail.
 *
 * Both sliders must have the same number of slides. Call the returned function
 * to teardown and remove all listeners.
 */
declare function syncThumbnails(primary: SliderInstance, thumbnail: SliderInstance, options?: SyncThumbnailsOptions): () => void;

declare global {
    interface Window {
        AeroSlider?: {
            createSlider: typeof createSlider;
            syncThumbnails: typeof syncThumbnails;
        };
    }
}

export { type SliderAlignment, type SliderConfig, type SliderEvent, type SliderEventData, type SliderInstance, type SyncThumbnailsOptions, createSlider, syncThumbnails };