@nexusui/components
Version:
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.
90 lines (89 loc) • 3.06 kB
TypeScript
import { ReactNode, RefObject } from 'react';
import Slider, { Settings } from 'react-slick';
import type { CardProps } from '@mui/material/Card';
import { IImageCard } from '../ImageCard';
import { ICardLoadingProps } from '../Card/Card.container';
export type ICarouselCard = Omit<CardProps, 'children' | 'content'> & ICardLoadingProps & {
/**
* It will be used to set the title of the carousel.
*/
headline?: ReactNode;
/**
* It will be triggered when user clicks on the previous button.
*/
onClickPrevious?: (index: number) => void;
/**
* It will be triggered when user clicks on the next button.
*/
onClickNext?: (index: number) => void;
/**
* @description the callback function when change the active step
* @param step
*/
onActiveStepChange?: (step: number) => void;
/**
* carousel items, Your can customize the carousel item by using this IImageCard or any ReactNode.
*/
items: ReadonlyArray<IImageCard | ReactNode>;
/**
* The index of the slide to show initially.
*/
initialActiveStep?: number;
/**
* 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' | 'infinite' | 'arrows' | 'appendArrows' | 'prevArrow' | 'nextArrow' | 'dots' | 'dotsClass' | 'appendDots' | 'pauseOnDotsHover' | 'initialSlide' | 'beforeChange'>>;
/**
* Enables autoplay of the carousel
* @default false
*/
autoplay?: Settings['autoplay'];
/**
* The interval at which the carousel will autoplay
* @default 3000
*/
autoplaySpeed?: Settings['autoplaySpeed'];
/**
* Enables dragging of the carousel
* @default true
*/
draggable?: Settings['draggable'];
/**
* Enables touch move of the carousel
* @default true
*/
touchMove?: Settings['touchMove'];
/**
* The threshold at which touch move will be triggered
* @default 5
*/
touchThreshold?: Settings['touchThreshold'];
/**
* Transition speed
* @default 300
*/
speed?: Settings['speed'];
/**
* Pauses the carousel when the mouse hovers over it
* @default true
*/
pauseOnHover?: Settings['pauseOnHover'];
/**
* Enables infinite scrolling of the carousel
* @default true
*/
infinite?: Settings['infinite'];
};
export declare const CarouselCard: (props: ICarouselCard) => import("react/jsx-runtime").JSX.Element;