@serene-dev/ng-carousel/index.d.ts

The library was created to help with Carousel implementations.

import * as _angular_core from '@angular/core';
import { TemplateRef, EventEmitter, SimpleChange } from '@angular/core';

/**
 * Vanilla Carousel for Angular
 */
declare class NgCarouselComponent {
    /**
     * Items to show in the slideshow
     */
    items?: ICarouselItem[];
    /**
     * Template to show if the items array is empty
     */
    readonly noItemsTemplate: _angular_core.InputSignal<TemplateRef<any>>;
    /**
     * It should be set when you select template as an item type. It will be used to render the custom content for the item's slide.
     *
     * A reference of the slide will be sent as a parameter into the template
     */
    readonly customItemTemplate: _angular_core.InputSignal<TemplateRef<any>>;
    /**
     * It will be embedded inside the buttons.
     *
     * A reference of the arrow navigation button will be sent as a parameter into the template
     */
    readonly customArrowContentTemplate: _angular_core.InputSignal<TemplateRef<any>>;
    /**
     * Number of items to show per view
     */
    readonly numberPerView: _angular_core.InputSignal<number>;
    /**
     * Use the current index indicators
     */
    readonly useIndicators: _angular_core.InputSignal<boolean>;
    /**
     * Use the arrow buttons
     */
    readonly useArrowButtons: _angular_core.InputSignal<boolean>;
    /**
     * Automatically play carousel
     */
    autoplay: boolean;
    /**
     * Speed of autoplay in milliseconds
     */
    autoplaySpeed: number;
    /**
     * Automatically play videos
     */
    readonly autoplayVideo: _angular_core.InputSignal<boolean>;
    /**
     * Make slide show restart at the end of the show
     */
    readonly continuous: _angular_core.InputSignal<boolean>;
    /**
     * Custom class on the navigation buttons
     */
    readonly navBtnClass: _angular_core.InputSignal<string>;
    /**
     * Custom class for the item label
     */
    readonly labelClass: _angular_core.InputSignal<string>;
    /**
     * Pause slider on hover
     */
    pauseOnHover: boolean;
    /**
     * Custom class for the item sublabel
     */
    readonly subLabelClass: _angular_core.InputSignal<string>;
    /**
     * Object fit for the items in the slide show
     */
    readonly contentFit: _angular_core.InputSignal<"contain" | "cover">;
    /**
     * Emitted when the current index changes. The current index and items are emitted.
     */
    slideChanged: EventEmitter<{
        index: number;
        currentItems: ICarouselItem[];
    }>;
    /**
     * The current index.
     */
    protected readonly currentIndex: _angular_core.WritableSignal<number>;
    /**
     * Group of items
     */
    protected readonly itemsGroup: _angular_core.WritableSignal<{
        isActive?: boolean;
        group: ICarouselItem[];
    }[]>;
    protected readonly hasItemsGroup: _angular_core.Signal<boolean>;
    protected readonly itemsGroupLength: _angular_core.Signal<number>;
    protected readonly disableNext: _angular_core.Signal<boolean>;
    protected intervaler?: any;
    protected onHover: boolean;
    protected ngOnChanges(changes: {
        [x in keyof NgCarouselComponent]: SimpleChange;
    }): void;
    protected resetInterval(): void;
    protected ngOnDestroy(): void;
    protected handleMouseOver(): void;
    protected handleMouseOut(): void;
    protected calculateGroup(): void;
    /**
     * Show the next slide
     */
    next(): void;
    /**
     * Show the previous slide
     */
    previous(): void;
    /**Set the current index directly */
    setCurrentIndex(index: number): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgCarouselComponent, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgCarouselComponent, "ng-carousel", never, { "items": { "alias": "items"; "required": true; }; "noItemsTemplate": { "alias": "noItemsTemplate"; "required": false; "isSignal": true; }; "customItemTemplate": { "alias": "customItemTemplate"; "required": false; "isSignal": true; }; "customArrowContentTemplate": { "alias": "customArrowContentTemplate"; "required": false; "isSignal": true; }; "numberPerView": { "alias": "numberPerView"; "required": false; "isSignal": true; }; "useIndicators": { "alias": "useIndicators"; "required": false; "isSignal": true; }; "useArrowButtons": { "alias": "useArrowButtons"; "required": false; "isSignal": true; }; "autoplay": { "alias": "autoplay"; "required": false; }; "autoplaySpeed": { "alias": "autoplaySpeed"; "required": false; }; "autoplayVideo": { "alias": "autoplayVideo"; "required": false; "isSignal": true; }; "continuous": { "alias": "continuous"; "required": false; "isSignal": true; }; "navBtnClass": { "alias": "navBtnClass"; "required": false; "isSignal": true; }; "labelClass": { "alias": "labelClass"; "required": false; "isSignal": true; }; "pauseOnHover": { "alias": "pauseOnHover"; "required": false; }; "subLabelClass": { "alias": "subLabelClass"; "required": false; "isSignal": true; }; "contentFit": { "alias": "contentFit"; "required": false; "isSignal": true; }; }, { "slideChanged": "slideChanged"; }, never, never, true, never>;
}
/**
 * Carousel Item config
 */
interface ICarouselItem<TData = any> {
    /**
     * Path to slide content
     */
    src?: string;
    /**
     * Item label
     */
    label?: string;
    /**
     * Item sub label
     */
    subLabel?: string;
    /**
     * Content type.
     *
     * Choose template to use custom html content in the slides.
     * @default "image"
     */
    type?: 'image' | 'video' | 'template';
    /**The contextual data to pass with the slide when using a custom slide template */
    data?: TData;
}

export { NgCarouselComponent };
export type { ICarouselItem };