react-responsive-carousel

  • Version 3.2.21
  • Published
  • 346 kB
  • 3 dependencies
  • MIT license

Install

npm i react-responsive-carousel
yarn add react-responsive-carousel
pnpm add react-responsive-carousel

Overview

React Responsive Carousel

Index

Classes

Interfaces

Classes

class Carousel extends React.Component<Props, State> {}

    constructor

    constructor(props: Props);

      property autoPlay

      autoPlay: () => void;

        property changeItem

        changeItem: (
        newIndex: number
        ) => (e: React.MouseEvent | React.KeyboardEvent) => void;

          property clearAutoPlay

          clearAutoPlay: () => void;

            property decrement

            decrement: (positions?: number, fromSwipe?: boolean) => void;

              property defaultProps

              static defaultProps: Props;

                property displayName

                static displayName: string;

                  property getInitialImage

                  getInitialImage: () => HTMLImageElement;

                    property getVariableItemHeight

                    getVariableItemHeight: (position: number) => number | null;

                      property handleClickItem

                      handleClickItem: (index: number, item: any) => void;

                        property handleClickThumb

                        handleClickThumb: (index: number, item: any) => void;

                          property handleOnChange

                          handleOnChange: (index: number, item: any) => void;

                            property increment

                            increment: (positions?: number, fromSwipe?: boolean) => void;

                              property isFocusWithinTheCarousel

                              isFocusWithinTheCarousel: () => boolean;

                                property moveTo

                                moveTo: (position?: number | undefined, fromSwipe?: boolean | undefined) => void;

                                  property navigateWithKeyboard

                                  navigateWithKeyboard: (e: KeyboardEvent) => void;

                                    property onClickNext

                                    onClickNext: () => void;

                                      property onClickPrev

                                      onClickPrev: () => void;

                                        property onSwipeBackwards

                                        onSwipeBackwards: () => void;

                                          property onSwipeEnd

                                          onSwipeEnd: (event: any) => void;

                                            property onSwipeForward

                                            onSwipeForward: () => void;

                                              property onSwipeMove

                                              onSwipeMove: (delta: { x: number; y: number }, event: any) => boolean;

                                                property onSwipeStart

                                                onSwipeStart: (event: any) => void;

                                                  property resetAutoPlay

                                                  resetAutoPlay: () => void;

                                                    property resetPosition

                                                    resetPosition: () => void;

                                                      property selectItem

                                                      selectItem: (
                                                      state: Pick<State, 'selectedItem' | 'swiping'>,
                                                      cb?: (() => void) | undefined
                                                      ) => void;

                                                        property setCarouselWrapperRef

                                                        setCarouselWrapperRef: (node: HTMLDivElement) => void;

                                                          property setItemsRef

                                                          setItemsRef: (node: HTMLElement, index: number) => void;

                                                            property setListRef

                                                            setListRef: (node: HTMLElement | HTMLUListElement) => void;

                                                              property setMountState

                                                              setMountState: () => void;

                                                                property setPosition

                                                                setPosition: (position: number, forceReflow?: boolean | undefined) => void;

                                                                  property setThumbsRef

                                                                  setThumbsRef: (node: Thumbs) => void;

                                                                    property startOnLeave

                                                                    startOnLeave: () => void;

                                                                      property stopOnHover

                                                                      stopOnHover: () => void;

                                                                        property updateSizes

                                                                        updateSizes: () => void;

                                                                          method bindEvents

                                                                          bindEvents: () => void;

                                                                            method componentDidMount

                                                                            componentDidMount: () => void;

                                                                              method componentDidUpdate

                                                                              componentDidUpdate: (prevProps: Props, prevState: State) => void;

                                                                                method componentWillUnmount

                                                                                componentWillUnmount: () => void;

                                                                                  method destroyAutoPlay

                                                                                  destroyAutoPlay: () => void;

                                                                                    method destroyCarousel

                                                                                    destroyCarousel: () => void;

                                                                                      method forceFocus

                                                                                      forceFocus: () => void;

                                                                                        method getPosition

                                                                                        getPosition: (index: number) => number;

                                                                                          method render

                                                                                          render: () => JSX.Element | null;

                                                                                            method renderControls

                                                                                            renderControls: () => JSX.Element | null;

                                                                                              method renderItems

                                                                                              renderItems: (isClone?: boolean) => JSX.Element[];

                                                                                                method renderStatus

                                                                                                renderStatus: () => JSX.Element | null;

                                                                                                  method renderThumbs

                                                                                                  renderThumbs: () => JSX.Element | null;

                                                                                                    method setupAutoPlay

                                                                                                    setupAutoPlay: () => void;

                                                                                                      method setupCarousel

                                                                                                      setupCarousel: () => void;

                                                                                                        method unbindEvents

                                                                                                        unbindEvents: () => void;

                                                                                                          class Thumbs

                                                                                                          class Thumbs extends Component<Props, State> {}

                                                                                                            constructor

                                                                                                            constructor(props: Props);

                                                                                                              property defaultProps

                                                                                                              static defaultProps: {
                                                                                                              axis: string;
                                                                                                              labels: { leftArrow: string; rightArrow: string; item: string };
                                                                                                              selectedItem: number;
                                                                                                              thumbWidth: number;
                                                                                                              transitionTime: number;
                                                                                                              };

                                                                                                                property displayName

                                                                                                                static displayName: string;

                                                                                                                  property handleClickItem

                                                                                                                  handleClickItem: (
                                                                                                                  index: number,
                                                                                                                  item: any,
                                                                                                                  e: React.MouseEvent | React.KeyboardEvent
                                                                                                                  ) => void;

                                                                                                                    property moveTo

                                                                                                                    moveTo: (position: number) => void;

                                                                                                                      property onSwipeEnd

                                                                                                                      onSwipeEnd: () => void;

                                                                                                                        property onSwipeMove

                                                                                                                        onSwipeMove: (delta: { x: number; y: number }) => boolean;

                                                                                                                          property onSwipeStart

                                                                                                                          onSwipeStart: () => void;

                                                                                                                            property setItemsListRef

                                                                                                                            setItemsListRef: (node: HTMLUListElement) => void;

                                                                                                                              property setItemsWrapperRef

                                                                                                                              setItemsWrapperRef: (node: HTMLDivElement) => void;

                                                                                                                                property setThumbsRef

                                                                                                                                setThumbsRef: (node: HTMLLIElement, index: number) => void;

                                                                                                                                  property slideLeft

                                                                                                                                  slideLeft: (positions?: number | undefined) => void;

                                                                                                                                    property slideRight

                                                                                                                                    slideRight: (positions?: number | undefined) => void;

                                                                                                                                      property updateSizes

                                                                                                                                      updateSizes: () => void;

                                                                                                                                        method componentDidMount

                                                                                                                                        componentDidMount: () => void;

                                                                                                                                          method componentDidUpdate

                                                                                                                                          componentDidUpdate: (prevProps: Props) => void;

                                                                                                                                            method componentWillUnmount

                                                                                                                                            componentWillUnmount: () => void;

                                                                                                                                              method destroyThumbs

                                                                                                                                              destroyThumbs: () => void;

                                                                                                                                                method getFirstItem

                                                                                                                                                getFirstItem: (selectedItem: number) => number;

                                                                                                                                                  method render

                                                                                                                                                  render: () => JSX.Element | null;

                                                                                                                                                    method renderItems

                                                                                                                                                    renderItems: () => JSX.Element[];

                                                                                                                                                      method setupThumbs

                                                                                                                                                      setupThumbs: () => void;

                                                                                                                                                        method UNSAFE_componentWillReceiveProps

                                                                                                                                                        UNSAFE_componentWillReceiveProps: (props: Props) => void;

                                                                                                                                                          Interfaces

                                                                                                                                                          interface CarouselProps

                                                                                                                                                          interface CarouselProps {}

                                                                                                                                                            property animationHandler

                                                                                                                                                            animationHandler: 'slide' | 'fade' | AnimationHandler;

                                                                                                                                                              property ariaLabel

                                                                                                                                                              ariaLabel?: string | undefined;

                                                                                                                                                                property autoFocus

                                                                                                                                                                autoFocus?: boolean;

                                                                                                                                                                  property autoPlay

                                                                                                                                                                  autoPlay?: boolean;

                                                                                                                                                                    property axis

                                                                                                                                                                    axis: 'horizontal' | 'vertical';

                                                                                                                                                                      property centerMode

                                                                                                                                                                      centerMode?: boolean;

                                                                                                                                                                        property centerSlidePercentage

                                                                                                                                                                        centerSlidePercentage: number;

                                                                                                                                                                          property children

                                                                                                                                                                          children?: React.ReactChild[];

                                                                                                                                                                            property className

                                                                                                                                                                            className?: string;

                                                                                                                                                                              property dynamicHeight

                                                                                                                                                                              dynamicHeight?: boolean;

                                                                                                                                                                                property emulateTouch

                                                                                                                                                                                emulateTouch?: boolean;

                                                                                                                                                                                  property infiniteLoop

                                                                                                                                                                                  infiniteLoop?: boolean;

                                                                                                                                                                                    property interval

                                                                                                                                                                                    interval: number;

                                                                                                                                                                                      property labels

                                                                                                                                                                                      labels: {
                                                                                                                                                                                      leftArrow: string;
                                                                                                                                                                                      rightArrow: string;
                                                                                                                                                                                      item: string;
                                                                                                                                                                                      };

                                                                                                                                                                                        property onChange

                                                                                                                                                                                        onChange: (index: number, item: React.ReactNode) => void;

                                                                                                                                                                                          property onClickItem

                                                                                                                                                                                          onClickItem: (index: number, item: React.ReactNode) => void;

                                                                                                                                                                                            property onClickThumb

                                                                                                                                                                                            onClickThumb: (index: number, item: React.ReactNode) => void;

                                                                                                                                                                                              property onSwipeEnd

                                                                                                                                                                                              onSwipeEnd: (event: React.TouchEvent) => void;

                                                                                                                                                                                                property onSwipeMove

                                                                                                                                                                                                onSwipeMove: (event: React.TouchEvent) => boolean;

                                                                                                                                                                                                  property onSwipeStart

                                                                                                                                                                                                  onSwipeStart: (event: React.TouchEvent) => void;

                                                                                                                                                                                                    property preventMovementUntilSwipeScrollTolerance

                                                                                                                                                                                                    preventMovementUntilSwipeScrollTolerance: boolean;

                                                                                                                                                                                                      property renderArrowNext

                                                                                                                                                                                                      renderArrowNext: (
                                                                                                                                                                                                      clickHandler: () => void,
                                                                                                                                                                                                      hasNext: boolean,
                                                                                                                                                                                                      label: string
                                                                                                                                                                                                      ) => React.ReactNode;

                                                                                                                                                                                                        property renderArrowPrev

                                                                                                                                                                                                        renderArrowPrev: (
                                                                                                                                                                                                        clickHandler: () => void,
                                                                                                                                                                                                        hasPrev: boolean,
                                                                                                                                                                                                        label: string
                                                                                                                                                                                                        ) => React.ReactNode;

                                                                                                                                                                                                          property renderIndicator

                                                                                                                                                                                                          renderIndicator: (
                                                                                                                                                                                                          clickHandler: (e: React.MouseEvent | React.KeyboardEvent) => void,
                                                                                                                                                                                                          isSelected: boolean,
                                                                                                                                                                                                          index: number,
                                                                                                                                                                                                          label: string
                                                                                                                                                                                                          ) => React.ReactNode;

                                                                                                                                                                                                            property renderItem

                                                                                                                                                                                                            renderItem: (
                                                                                                                                                                                                            item: React.ReactNode,
                                                                                                                                                                                                            options?: {
                                                                                                                                                                                                            isSelected: boolean;
                                                                                                                                                                                                            isPrevious: boolean;
                                                                                                                                                                                                            }
                                                                                                                                                                                                            ) => React.ReactNode;

                                                                                                                                                                                                              property renderThumbs

                                                                                                                                                                                                              renderThumbs: (children: React.ReactChild[]) => React.ReactChild[];

                                                                                                                                                                                                                property selectedItem

                                                                                                                                                                                                                selectedItem: number;

                                                                                                                                                                                                                  property showArrows

                                                                                                                                                                                                                  showArrows: boolean;

                                                                                                                                                                                                                    property showIndicators

                                                                                                                                                                                                                    showIndicators: boolean;

                                                                                                                                                                                                                      property showStatus

                                                                                                                                                                                                                      showStatus: boolean;

                                                                                                                                                                                                                        property showThumbs

                                                                                                                                                                                                                        showThumbs: boolean;

                                                                                                                                                                                                                          property statusFormatter

                                                                                                                                                                                                                          statusFormatter: (currentItem: number, total: number) => string;

                                                                                                                                                                                                                            property stopOnHover

                                                                                                                                                                                                                            stopOnHover: boolean;

                                                                                                                                                                                                                              property stopSwipingHandler

                                                                                                                                                                                                                              stopSwipingHandler: StopSwipingHandler;

                                                                                                                                                                                                                                property swipeable

                                                                                                                                                                                                                                swipeable: boolean;

                                                                                                                                                                                                                                  property swipeAnimationHandler

                                                                                                                                                                                                                                  swipeAnimationHandler: SwipeAnimationHandler;

                                                                                                                                                                                                                                    property swipeScrollTolerance

                                                                                                                                                                                                                                    swipeScrollTolerance: number;

                                                                                                                                                                                                                                      property thumbWidth

                                                                                                                                                                                                                                      thumbWidth?: number;

                                                                                                                                                                                                                                        property transitionTime

                                                                                                                                                                                                                                        transitionTime: number;

                                                                                                                                                                                                                                          property useKeyboardArrows

                                                                                                                                                                                                                                          useKeyboardArrows?: boolean;

                                                                                                                                                                                                                                            property verticalSwipe

                                                                                                                                                                                                                                            verticalSwipe: 'natural' | 'standard';

                                                                                                                                                                                                                                              property width

                                                                                                                                                                                                                                              width: number | string;

                                                                                                                                                                                                                                                Package Files (4)

                                                                                                                                                                                                                                                Dependencies (3)

                                                                                                                                                                                                                                                Dev Dependencies (40)

                                                                                                                                                                                                                                                Peer Dependencies (0)

                                                                                                                                                                                                                                                No peer dependencies.

                                                                                                                                                                                                                                                Badge

                                                                                                                                                                                                                                                To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                                                                                                You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-responsive-carousel.

                                                                                                                                                                                                                                                • Markdown
                                                                                                                                                                                                                                                  [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-responsive-carousel)
                                                                                                                                                                                                                                                • HTML
                                                                                                                                                                                                                                                  <a href="https://www.jsdocs.io/package/react-responsive-carousel"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>