react-simply-carousel
Version:
A simple, lightweight, fully controlled isomorphic (with SSR support) React.js carousel component. Touch enabled and responsive. With support for autoplay and infinity options. Fully customizable
71 lines (70 loc) • 2.62 kB
TypeScript
import React, { HTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
type NavDirection = 'forward' | 'backward';
type NavBtnProps = ButtonHTMLAttributes<HTMLButtonElement> & {
show?: boolean;
};
type DotsNav = {
show?: boolean;
containerProps?: HTMLAttributes<HTMLDivElement>;
itemBtnProps?: ButtonHTMLAttributes<HTMLButtonElement>;
activeItemBtnProps?: ButtonHTMLAttributes<HTMLButtonElement>;
};
export type VisibleSlidesState = {
isFirstSlideVisible: boolean;
isLastSlideVisible: boolean;
visibleSlides: {
slideIndex: number;
isFullyVisible: boolean;
}[];
};
type ReactSimplyCarouselStaticProps = {
activeSlideIndex: number;
activeSlideProps?: HTMLAttributes<any>;
autoplay?: boolean;
autoplayDelay?: number;
autoplayDirection?: NavDirection;
backwardBtnProps?: NavBtnProps;
centerMode?: boolean;
children?: ReactNode;
containerProps?: HTMLAttributes<HTMLDivElement>;
delay?: number;
disableNavIfAllVisible?: boolean;
disableNavIfEdgeActive?: boolean;
disableNavIfEdgeVisible?: boolean;
disableSwipeByMouse?: boolean;
disableSwipeByTouch?: boolean;
dotsNav?: DotsNav;
easing?: string;
forwardBtnProps?: NavBtnProps;
hideNavIfAllVisible?: boolean;
infinite?: boolean;
innerProps?: HTMLAttributes<HTMLDivElement>;
itemsListProps?: HTMLAttributes<HTMLDivElement>;
itemsToScroll?: number;
itemsToShow?: number;
mouseSwipeRatio?: number;
mouseSwipeTreshold?: number;
onAfterChange?: (activeSlideIndex: number, deprecated_positionSlideIndex: number) => void;
onRequestChange: (newActiveSlideIndex: number, newVisibleSlidesState: VisibleSlidesState) => void;
persistentChangeCallbacks?: boolean;
preventScrollOnSwipe?: boolean;
showSlidesBeforeInit?: boolean;
speed?: number;
swipeRatio?: number;
swipeTreshold?: number;
touchSwipeRatio?: number;
touchSwipeTreshold?: number;
updateOnItemClick?: boolean;
visibleSlideProps?: HTMLAttributes<any>;
dirRTL?: boolean;
};
type ReactSimplyCarouselResponsiveProps = (Omit<Omit<ReactSimplyCarouselStaticProps, 'activeSlideIndex'>, 'onRequestChange'> & {
minWidth?: number;
maxWidth?: number;
})[];
export type ReactSimplyCarouselProps = ReactSimplyCarouselStaticProps & {
responsiveProps?: ReactSimplyCarouselResponsiveProps;
};
declare function ReactSimplyCarousel({ responsiveProps, ...props }: ReactSimplyCarouselProps): React.JSX.Element;
declare const _default: React.MemoExoticComponent<typeof ReactSimplyCarousel>;
export default _default;