@nexusui/components/core/ImageCarousel/ImageCarousel.container.d.ts

These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.

import { BoxProps } from '@mui/material/Box';
import { FC, ReactNode, RefObject } from 'react';
import { DialogProps } from '@mui/material/Dialog';
import type { Settings } from 'react-slick';
import Slider from 'react-slick';
export type ImageInfo = {
    /**
     * The image source
     * The source can be a string, or a React node.
     */
    src: string | ReactNode;
    /**
     * The image alternative text
     */
    alt?: string;
};
export interface IImageCarouselProps extends BoxProps {
    /**
     * The images to display.
     * The structure of the image is:
     *
     *```
     * export interface ImageInfo {
     *  src: string | ReactNode;
     *  alt?: string;
     * }
     *```
     * @default []
     */
    images: ReadonlyArray<ImageInfo>;
    /**
     * The position of the previous/next controls
     * @default bottom
     */
    controlsPosition?: 'bottom' | 'middle';
    /**
     * Determines whether the full screen button is displayed
     * @default false
     */
    allowFullScreen?: boolean;
    /**
     * Allows customization of the full screen dialog
     */
    fullScreenDialogProps?: Omit<DialogProps, 'open'>;
    /**
     * Label for the previous button
     *
     * If the controlsPosition is 'bottom', the text will be displayed on the button.
     * If the controlsPosition is 'middle', the text will display in the tooltip of the button
     * @default Previous
     */
    previousButtonLabel?: string;
    /**
     * Label for the next button
     *
     * If the controlsPosition is 'bottom', the text will be displayed on the button
     * If the controlsPosition is 'middle', the text will display in the tooltip of the button
     * @default Next
     */
    nextButtonLabel?: string;
    /**
     * Initial image index
     * @default 0
     */
    initialActiveStep?: number;
    /**
     * @description the callback function when click the image
     * @param image
     */
    onImageClick?: (image: ImageInfo) => void;
    /**
     * @description the callback function when click the full screen button
     * @param fullScreen
     */
    onToggleFullScreen?: (fullScreen: boolean) => void;
    /**
     * @description the callback function when change the active step
     * @param step
     * @param image
     */
    onActiveStepChange?: (step: number, img: ImageInfo) => void;
    /**
     * This the component, that is used to swipe between images.
     *
     * @default Slider
     * @see https://react-slick.neostack.com/docs/api
     */
    SwipeableViews?: typeof Slider;
    /**
     * This is the ref for the SwipeableViews component. if you pass this prop, you will be able to use the SwipeableViews API.
     */
    swiperRef?: RefObject<typeof Slider | null>;
    /**
     * Props derived from React slick. The documentation can be found here:
     * https://react-slick.neostack.com/docs/api
     */
    swipeableViewsProps?: Partial<Omit<Settings, 'autoplay' | 'autoplaySpeed' | 'draggable' | 'touchMove' | 'touchThreshold' | 'speed' | 'pauseOnHover' | 'pauseOnFocus' | 'infinite' | 'arrows' | 'appendArrows' | 'prevArrow' | 'nextArrow' | 'dots' | 'dotsClass' | 'appendDots' | 'pauseOnDotsHover' | 'initialSlide' | 'beforeChange'>>;
    /**
     * Enables autoplay of the carousel
     * @default false
     */
    autoplay?: boolean;
    /**
     * The interval at which the carousel will autoplay
     * @default 3000
     */
    autoplaySpeed?: number;
    /**
     * Enables dragging of the carousel
     * @default true
     */
    draggable?: boolean;
    /**
     * Enables touch move of the carousel
     * @default true
     */
    touchMove?: boolean;
    /**
     * The threshold at which touch move will be triggered
     * @default 5
     */
    touchThreshold?: number;
    /**
     * Transition speed
     * @default 300
     */
    speed?: number;
    /**
     * Pauses the carousel when the mouse hovers over it
     * @default true
     */
    pauseOnHover?: boolean;
    /**
     * Pauses the carousel when the carousel is in focus
     * @default true
     */
    pauseOnFocus?: boolean;
    /**
     * Enables infinite scrolling of the carousel
     * @default true
     */
    infinite?: boolean;
}
export declare const ImageCarousel: FC<IImageCarouselProps>;
export default ImageCarousel;