react-responsive-3d-carousel
Version:
React Responsive 3D Carousel
71 lines (70 loc) • 2.48 kB
TypeScript
import React from 'react';
import { LayoutType } from '../../hooks/useLayout';
import { SwipeDirection } from '../../hooks/useSwipe';
import { DefaultOption } from '../../utils/defaultLayoutInfo';
import { ArrowsProps } from '../Arrows/Arrows';
import { IndicatorsProps } from '../Indicators/Indicators';
import { StatusProps } from '../Status/Status';
import './Carousel.scss';
export type AlignType = 'center' | 'top' | 'bottom';
export interface CarouselProps {
children?: React.ReactNode;
ariaLabel?: string;
items: JSX.Element[];
startIndex?: number;
/** Container */
containerWidth?: string;
containerHeight?: string;
containerPadding?: string;
/** Carousel 2D */
width?: string | number;
height?: string | number;
aspectRatio?: number | 'auto';
align?: AlignType;
boxShadow?: string;
/** Carousel 3D */
perspective?: number | string;
perspectiveOrigin?: string;
layout?: LayoutType;
defaultOption?: DefaultOption;
/** Carousel Transition */
sizeDuration?: number;
sizeTimingFn?: string;
transformDuration?: number;
transformTimingFn?: string;
/** Carousel Interaction */
focusOnSelect?: boolean;
pauseOnHover?: boolean;
pauseOnTransition?: 'none' | 'size' | 'transform' | 'both';
/** Carousel Callback */
onChange?: (index: number, item: JSX.Element) => void;
onClickItem?: (e: React.MouseEvent, index: number, item: JSX.Element, isCurIndex: boolean) => void;
/** Carousel Play */
autoPlay?: boolean;
interval?: number;
infiniteLoop?: boolean;
/** Carousel Focus */
autoFocus?: boolean;
slideWithKeyboard?: 'none' | 'vertical' | 'horizontal' | 'both';
/** Carousel Swipe */
swipeable?: boolean;
swipeDirection?: SwipeDirection;
onSwipeStart?: (event: TouchEvent) => void;
onSwipeEnd?: (event: TouchEvent) => void;
onSwipeMove?: (event: TouchEvent) => void;
showStatus?: boolean;
status?: Omit<StatusProps, "length" | "curIndex">;
showArrows?: boolean;
arrows?: ArrowsProps;
showIndicators?: boolean;
indicators?: Omit<IndicatorsProps, "length" | "curIndex">;
}
type DefaultContext = {
curIndex: number;
setCurIndex: React.Dispatch<React.SetStateAction<number>>;
slideNext: () => void;
slidePrev: () => void;
};
export declare const CarouselContext: React.Context<DefaultContext>;
declare const Carousel: React.FC<CarouselProps>;
export default Carousel;